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

より適切な言葉がないため、それらすべてを 1 つの列に並べます。

それでは、一連のラベル/ドロップダウンリストが一列に並んでいるが、各ドロップダウンリストのすぐ上にラベルがあるように、どのようにスタイルを設定すればよいでしょうか? もちろんテーブルはありません。

ありがとう。

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

おそらく、 and を , または a のような別のタグにグループlabel化し、selectその要素をorにする必要があります。pdivfieldsetdisplay:inline-blockfloat: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 に答える