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

更新：精致的跨浏览器显示

不太确定你的最终目标是什么，但如果我解释正确，我认为像this更新的小提琴演示的就是你想要的，它使用它（需要设置一个显式的

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

我最终将它们粘贴在表格中，因为我有其中几行，并且它们都必须对齐。