1 
<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          |
+------------+    +----------------+
4

3 回答 3

2

label将每个和select组包围在 a和<div>CSS 中，您可以display: block使用.<label><select>float: left<div>

<style>
    div { float: left; }
    label, select { display: block; }
</style>

<div>
<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>
<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>
于 2013-07-31T04:22:23.160 回答
1 
<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:blockdispaly:block<select>

于 2013-07-31T04:23:05.100 回答
0

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

一个快速说明：标签中的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}
于 2013-07-31T04:27:03.893 回答