[英]drop down list sit next to each other
How would I make two drop down list sit next to each other. 我将如何使两个下拉列表彼此相邻。 I have tried floating left.
我尝试过向左浮动。
here is my code: http://jsfiddle.net/bKwMt/ 这是我的代码: http : //jsfiddle.net/bKwMt/
HTML HTML
<label for="numberRooms">
NUMBER OF ROOMS <br>
<select name="type" id ="numberRooms">
<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 for="numberBeds">
NUMBER OF BEDS<br>
<select name="type" id="numberBeds">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br>
</label>
CSS CSS
#numberRooms, #numberBeds{
float:left;
}
//UPDATE// // //更新
I have been trying to move the number of beds dropdown right to align with the end of the above drop down but nothing seems to be working :(. I am wondering if there is some padding that is stopping it maybe? I am not sure. 我一直在尝试将床的数量下拉至与上述下拉列表的末尾对齐的位置,但似乎无济于事:(。我想知道是否有些填充物正在阻止它呢?我不确定。
http://jsfiddle.net/bKwMt/6/ http://jsfiddle.net/bKwMt/6/
label[for=numberBeds] {
margin-left: 30px;
}
#numberBeds, #numberRooms {
width: 100px;
}
I'd suggest, since the select
elements are contained in label
elements, styling those rather than the select
elements themselves: 我建议,因为
select
元素包含在label
元素中,所以要对它们进行样式设置,而不要对select
元素本身进行样式设置:
label {
display: inline-block;
}
Use a table and have each section in a cell, within the same row: 使用表并将每个节放在同一行中的单元格中:
<table>
<tr>
<td>
<label for="numberRooms">
ROOMS <br>
<select name="type" id ="numberRooms">
<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>
</td>
<td>
<label for="numberBeds">
BEDS<br>
<select name="type" id="numberBeds">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br>
</label>
</td>
</tr>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.