如何在一行中保留三个选择标签？

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>