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 でグループ化し、CSS で を使用してから<div>を使用できます。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:blockまた与えdispaly:blockます<select>

于 2013-07-31T04:23:05.100 に答える
0

編集:追加のマークアップを追加したくないことがわかった後、解決策があるかもしれません。マークアップの順序を少し変更しますが、そのセマンティック値は保持されます。

1 つの簡単な注意:タグのfor属性は、タグの属性とlabel一致する必要があります。それを反映するように HTML を変更しました。nameselect

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 に答える