Question

<label for="adults">Adults</label> 
<select name="audits">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10+">10+</option>
</select> 
<label for="children">Children</label> 
<select name="audits">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10+">10+</option>
</select>

如何显示标签并选择如下？

+------------+    +----------------+
|label       |    |label           |
+------------+    +----------------+
+------------+    +----------------+
|select      |    |select          |
+------------+    +----------------+

Answer 1

围绕label和CSS中的每个select和<div>小组，您可以display: block <label>和<select>然后{{1 } float: left。

<div>

Answer 2

<div class="l-one">
<label for="adults">Adults</label>
<select name="audits">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10+">10+</option>
</select>
</div>
<div class="l-two">
<label for="children">Children</label>
<select name="audits">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
</div>

添加div后，修复<div>的宽度并将lable提供给dispaly:block，并将dispaly:block提供给<select>

Answer 3

编辑：在看到您不想添加任何其他标记后，我可能会为您提供解决方案。您将稍微重新排序您的标记，但它将保留其语义值。

一个简单说明：for代码中的label属性应与name代码中的select属性相匹配。我已经改变了HTML来反映这一点。

HTML：

<label for="adults">Adults</label> 
<label for="children">Children</label> 
<select name="adults">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10+">10+</option>
</select>
<select name="children">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10+">10+</option>
</select>

CSS：

label, select {display: inline-block; float: left; width: 150px; margin: 0px 5px;}
select[name="adults"] {clear: both}

显示标签并按以下顺序选择

3 个答案: