如何将三个选择标记保持在一行中？

Question

在此示例中，我使用了三个选择标记来表示月份，日期和年份，但是我需要在一行中使用它们。我已经尝试过display: inline-block;，但没有任何改变。

<form name="c_month">
  <select name="cars">
    <option name="o1" value="1">January</option>
    <option name="o2" value="2">February</option>
    <option name="o3" value="3">March</option>
    <option name="o4" value="4">April</option>
  </select>
  </form></span>
  <form name="c_date">
  <select name="cars">
    <option name="o1" value="1">1</option>
    <option name="o2" value="2">2</option>
    <option name="o3" value="3">3</option>
    <option name="o4" value="4">4</option>
  </select>
  </form>
  <form name="c_year">
  <select name="cars">
    <option name="o1" value="2018">2018</option>
    <option name="o2" value="2017">2017</option>
    <option name="o3" value="2016">2016</option>
    <option name="o4" value="2015">2015</option>
  </select>
</form>

Answer 1

我建议将它们全部包装在一个表单元素中。

<form>
  <select name="cars">
    <option name="o1" value="1">January</option>
    <option name="o2" value="2">February</option>
    <option name="o3" value="3">March</option>
    <option name="o4" value="4">April</option>
  </select>
  <select name="cars">
    <option name="o1" value="1">1</option>
    <option name="o2" value="2">2</option>
    <option name="o3" value="3">3</option>
    <option name="o4" value="4">4</option>
  </select>
  <select name="cars">
    <option name="o1" value="2018">2018</option>
    <option name="o2" value="2017">2017</option>
    <option name="o3" value="2016">2016</option>
    <option name="o4" value="2015">2015</option>
  </select>
</form>

除非您特别想要3种形式，否则我建议添加：

form {
    display: inline-block;
}

Answer 2

尝试display: flex;

.form{
  display: flex;
}
.form .items{
  padding: 0 10px;
}

  <div class="form">
  <form name="c_month" class="items">
<select name="cars">
  <option name="o1" value="1">January</option>
  <option name="o2" value="2">February</option>
  <option name="o3" value="3">March</option>
  <option name="o4" value="4">April</option>
</select>
</form></span>
<form name="c_date" class="items">
<select name="cars">
  <option name="o1" value="1">1</option>
  <option name="o2" value="2">2</option>
  <option name="o3" value="3">3</option>
  <option name="o4" value="4">4</option>
</select>
</form>
<form name="c_year" class="items">
<select name="cars">
  <option name="o1" value="2018">2018</option>
  <option name="o2" value="2017">2017</option>
  <option name="o3" value="2016">2016</option>
  <option name="o4" value="2015">2015</option>
</select>
</form>
  </div>

Answer 3

由于具有三种形式，因此必须设置以下CSS：

form {
   display: inline-block;
}

通常，form元素是block元素，因此它总是占100％。另一种方法是为表单元素设置特定的宽度，并使用如下所示的浮点数：

form {
    width: 33%;
    float: left;
}

这是第一种方法：

form {
    display: inline-block;
}

<form>
  <select name="cars">
    <option name="o1" value="1">January</option>
    <option name="o2" value="2">February</option>
    <option name="o3" value="3">March</option>
    <option name="o4" value="4">April</option>
  </select>
</form>
<form>
  <select name="cars">
    <option name="o1" value="1">1</option>
    <option name="o2" value="2">2</option>
    <option name="o3" value="3">3</option>
    <option name="o4" value="4">4</option>
  </select>
</form>
<form>
  <select name="cars">
    <option name="o1" value="2018">2018</option>
    <option name="o2" value="2017">2017</option>
    <option name="o3" value="2016">2016</option>
    <option name="o4" value="2015">2015</option>
  </select>
</form>