1

私はCSSがあまり得意ではないので、各単一のテキスト入力とラベルを1行に並べる方法でフォームを正しくスタイル設定する方法を知りたいです。このような ：

<label for="input1">...</label>
<input type="text" id="input1"/>
<label for="input2">...</label>
<input type="text" id="input2"/>
<label for="input3">...</label>
<input type="text" id="input3"/>
<label for="input3">...</label>
<input type="text" id="input3"/>

そしてそれは次のようなウェブページに表示されます：

(label)(input)
(label)(input)
(label)(input)
(label)(input)
4

6 に答える 6

4 
<label>foo</label>
<input type="text"/>
<label>foo</label>
<input type="text"/>​

<style>
input, label { float:left  }
label { clear:left; }
</style>

</ p>

http://jsfiddle.net/RpRS5/

于 2012-08-13T19:12:27.513 に答える
2

私は、よりきれいなアクセシブルなフォームについて、AListApartによるこのチュートリアルをお勧めします。いくつかのカスタムスタイルで定義リストを使用することもできます。

<dl><dt><label></label></dt>
  <dd><input></dd></dl>

そして次のようなもの：

dl dt {
    float: left;
    width: 8em;
}

編集： A List Apartの記事を要約すると、フォームフィールドを順序付きリストに配置することをお勧めしますol。ラベルはinline-block、関連付けられたフィールドの横に水平に表示されるように表示されます。

于 2012-08-13T19:26:43.340 に答える
1

入力をlabel要素内に配置すると、単純に入力することdisplay: blockもフロートすることもできます。表示が好きですが、変更するのは簡単です。

<label>Hello <input type="radio" name="what" value="Hello" /></label>

http://jsfiddle.net/Bpxfp/

于 2012-08-13T19:15:16.040 に答える
1

それらをリストに入れるか、リストのような構造に入れます（つまり、各「行」をdivでラップします）。

于 2012-08-13T19:12:06.327 に答える
0

http://jsfiddle.net/ud7YE/1/

ラッパーの幅を変えることで、ラベルと入力の間のスペースを制御できます。ラベルの高さと入力の上マージンを同じ値で負に設定するだけです

于 2012-08-13T19:29:01.803 に答える
0

囲んでいるラベルを見つけて、divまたはリストにタグを入力または選択します。また、ラベルと選択タグはタイプである必要がありますinline-block

<div>
    <label>Name: </label><input type="text" />
</div>

<div>
    <label>Place: </label><input type="text" />
</div>

CSS：

label {
    display: inline-block;
}
input {
    display: inline-block;
    padding: 2px;
}
div {
    display: block;
    margin: 2px 0;
}

これはうまくいくでしょう。

于 2012-08-13T20:11:08.023 に答える