2

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

目前我在我的 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;
}

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

那么我将如何设置它们的样式，以便连续排列一堆标签/下拉列表，但是，每个下拉列表的正上方都有一个标签？当然没有桌子。

谢谢。

4

5 回答 5

3

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

<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/ ​</p>

于 2012-05-24T23:16:10.813 回答
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;
}

多行更新

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

于 2012-05-24T23:23:37.557 回答
1

您可能必须将labeland分组到select另一个标签中，例如 ap或diva fieldset，然后将该元素display:inline-block或float:left.

于 2012-05-24T23:16:53.463 回答
0

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

<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>
于 2012-05-24T23:14:42.053 回答
0

我最终把这些贴在一张桌子上，因为我有几行这样的行，它们都必须排成一行。

于 2012-05-25T00:03:49.153 回答