3

ラベル/テキスト入力要素のセット (複数の「行」) が必要です。HTML テーブルを使用せずにテキスト入力要素を垂直方向に揃えたい。すべてのラベルを十分な幅に設定するとこれが行われるように見えますが、これは機能しません。

HTML

<label>Invoice #</label>
<input type="text" id="invoiceNumber"></input>
</br>
<label>Date</label>
<input type="text" id="date"></input>

CSS

label {
    font-family: Consolas, 'Segoe UI', sans-serif;
    margin-left: 10px;
    min-width: 120px;
}

http://jsfiddle.net/clayshannon/8wRT3/1/のjsfiddle

4

2 に答える 2

4

スタイル付き順序なしリストをコンテナとして使用して、間隔を管理します。

ul, li { margin:0;padding:0;list-style:none } //add margins to adjust spacing
li { clear:both }

float:left+ display:block+ width: またはdisplay:inline-block+でラベルを使用しwidth:ます。

<ul>
   <li><label>...</label> <input.... /></li>
   ...
</ul>

参照: http://alistapart.com/article/prettyaccessibleforms

于 2013-09-25T17:13:04.257 に答える
1

まず、あなたの jsFiddle では、"//" は CSS コードをコメントアウトするための正しい手順ではありません。あなたがすべきことはこれです：

HTML

<label>Invoice #</label>
<input type="text" id="invoiceNumber"></input>
<div style="clear:both;"></div>
<label>Date</label>
<input type="text" id="date"></input>

CSS: 入力を次のように変更します。

input {
    float:right;
}

もっと左に寄せたい場合は、margin-left プロパティを調整します。http://jsfiddle.net/8wRT3/6/

于 2013-09-25T17:14:14.037 に答える