下拉列表彼此相邻

Question

我如何让两个下拉列表彼此相邻。我试过漂浮左。

这是我的代码： http://jsfiddle.net/bKwMt/

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

#numberRooms, #numberBeds{
float:left;


}

// // UPDATE

我一直试图将床的下拉数量向右移动以与上述下拉的结束对齐，但似乎没有任何工作:(。我想知道是否有一些填充可能会停止它？我是不确定。

http://jsfiddle.net/bKwMt/6/

label[for=numberBeds] {
margin-left: 30px;
}

#numberBeds, #numberRooms {
width: 100px;
}

Answer 1

我建议，因为select元素包含在label元素中，而不是select元素本身的样式：

label {
    display: inline-block;
}

JS Fiddle demo

Answer 2

使用表并将每个部分放在同一行的单元格中：

<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>

JS Fiddle here

Answer 3

Fiddle

使标签显示为inline-block，它们将很好地融合在一起，就像它们在同一行文本中一样。

label {
    display: inline-block;
}