css - 使用 css 设置一行标签和下拉列表的样式

Question

在一行中设置一堆标签/下拉列表的样式的方法是什么，但是，每个下拉列表的正上方都有一个标签。

目前我的html中有

<label for="select1">Label1</label>
<select id="select1">...<select>

<label for="select2">Label2</label>
<select id="select1">...<select>

<label for="select3">Label3</label>
<select id="select3">...<select>

默认情况下，它们都排成一行。如果我应用这种风格

label {
display:block;
}

由于缺少更好的词，我将所有这些都排在一栏中。

那么我该如何设置它们的样式，使一堆标签/下拉列表排成一行，但是每个下拉列表的正上方都有一个标签？当然没有 table 。

谢谢。

Answer 1

将每个“列表/标签”组合包装在一个 block 元素中。然后您可以 float 该元素以在同一行上有多个元素:

<div class='lst'>
    <label for="select1">Label1</label>
    <select id="select1">...<select>
</div>

<div class='lst'>
    <label for="select2">Label2</label>
    <select id="select1">...<select>
</div>

<div class='lst'>
    <label for="select3">Label3</label>
    <select id="select3">...<select>
</div>​

div.lst {
 float: left;   
 margin: 0 5px 0 5px;
}

div.lst label {
 display: block;   
}

fiddle 示例:http://jsfiddle.net/Z5hAm/