3

ラベル付きのフォーム コントロールが 2 つあります。ラベルをコントロールの上に表示したいが、コントロールを隣り合わせに表示したい。どちらか一方を行う方法はわかりますが、両方を行うことはできません。

私は現在持っています

<div class="control-group">
    <label class="control-label" for="select1">Select1</label>

    <div class="controls">
        <select id="select1">
            <option value="abc">ABC</option>
            <option value="def">DEF</option>
        </select>
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="text1">Text1</label>

    <div class="controls">
        <input id="text1"/>
    </div>
</div>

jsfiddle はhttp://jsfiddle.net/BA4g7/です

2 つのコントロール グループを水平方向に並べるにはどうすればよいですか? それらを一列に並べる必要がありますか？

4

2 に答える 2

4

これは問題ないようです：

.control-group {
    display: inline-block;
    vertical-align: top;
}

ただし、オンラインのままであることを保証したい場合(狭い画面幅でラップダウンしないようにしたい場合) は、この例のように、別のラップでラップして、その上にdiv設定する必要があります。white-space: nowrap

また、見栄えを良くしたい場合は、テキスト入力で寸法を調整する必要があります。私の FF ブラウザーでは、次のようなものが見栄えがします。

#text1 {
    height: 20px;
    padding: 4px 0;
}
于 2013-06-21T18:22:47.710 に答える