使用 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;
}

我把它们都排在一列中，因为没有更好的词。

那么我将如何设置它们的样式，以便一堆标签/下拉列表在一行中，但是，每个下拉列表在其上方都有一个标签？ 当然没有表格。

谢谢。

Answer 1

将

每个"列表/标签"组合包装在一个块元素中。然后，您可以浮动该元素以在同一行上具有多个项目：

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

小提琴示例：http://jsfiddle.net/Z5hAm/​

Answer 2

更新：改进的跨浏览器显示

不太确定您的最终目标是什么，但是如果我解释正确，我认为像这个更新的小提琴演示的东西就是您要追求的，它使用它（需要设置一个明确的width才能使用）：

.CSS

label, select {
    display: inline-block;
    width: 100px;
}
label {
    position: relative;
    top: -1.2em;
    left: 5px;
}
select {
    margin: 1.5em 0 0 -100px;
}

更新多行

像这样小提琴一样设置一个固定宽度的包装元素，以使行换行。

Answer 3

您可能必须将label和select分组到另一个标签中，例如p，div或fieldset，然后将该元素设置为display:inline-block或float:left。

Answer 4

查看本页顶部的菜单（问题、标签、用户等） 它与无序列表放在一起。

<div class="nav mainnavs">
    <ul>
        <li class="youarehere"><a id="nav-questions" href="/questions">Questions</a></li>
        <li><a id="nav-tags" href="/tags">Tags</a></li>
        <li><a id="nav-users" href="/users">Users</a></li>
        <li><a id="nav-badges" href="/badges">Badges</a></li>
        <li><a id="nav-unanswered" href="/unanswered">Unanswered</a></li>
    </ul>
</div>

您可以将每个标签/下拉对粘贴到一个列表项中。

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

Answer 5

我最终将它们粘贴在表格中，因为我有几行，它们都必须排列。