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>

By default, they all line up in one row. If I apply this style

label {
display:block;
}

我把他们都排成一列, 由于缺乏更好的词。

那么,我如何用风格来描述它们,让一排的标签/删除列表,但是,每个下降列表上方都有标签?当然没有表格。

Answer 1

<强> 更新日期: 精细的交叉浏览器显示

不清楚你最终的目标是什么, 但如果我解释得正确, 我认为像这样的更新的小提琴 < /a> 显示你的目的所在, 使用这个方法( 需要设定一个明确的 < code> width 来工作 ) :

<强 > CSS

label, select {
    display: inline-block;
    width: 100px;
}

label {
    position: relative;
    top: -1.2em;
    left: 5px;
}

select {
    margin: 1.5em 0 0 -100px;
}

多行 < 强 > 更新 < /强 >

设置一个固定宽度 < a href=> 的包装元素。 http://jsfiddle. net/ L5sty/ 9/" rel=“ nofollow” > 类似此小字 < / a >, 使行被包装。

Answer 2

将每个“ 列表/ 标签” 组合在块元素中进行折行。然后, 您可以将该元素浮动到同一行有多个项 :

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

Example fiddle: http://jsfiddle.net/Z5hAm/

Answer 3

您可能不得不将 label 和 select 归类在另一个标签中,如 p , div 或 fieldset ,然后使该元素成为 display: inline- block 或 float: lft 。

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

最后,我把这些放在桌子上,因为我有几个排子,他们都得排成一排。

友情链接