-1

現在、HTML5 ページを作成しています。フォーマットを br から行間隔に使用する方法から、行の高さ、パディング、またはマージン (いずれか簡単な方) に切り替える際に問題が発生しています。すべてがフォームとフィールドセットタグの中にあります。すべての行を独立させたいのではなく、一部だけにしたいのです。ラジオ ボタンとチェック ボックスを含むフォームを作成しているため、いくつかのテキストを並べて表示したい。しかし、br タグを使用する代わりに、それを css の line-height、padding、または margin に切り替える方法を教えてください。

<form>
<fieldset class = "top">
Please Select a car: <br>
<input type="radio" name="car" value="truck">truck
<input type="radio" name="car" value="van">van
<input type="radio" name="car" value="suv">suv<br>
<input type="radio" name="car" value="coupe">coupe
<br>
<br>
<input type="checkbox" name="color" value="Blue">Blue
<input type="checkbox" name="color" value="red">red
<br>
<br>
<input type="checkbox" name="color" value="Orange">Orange
<input type="checkbox" name="color" value="black">Black
<br>
<br>
<input type="checkbox" name="color" value="Green">green
<input type="checkbox" name="color" value="brown">brown
<br>
<br>

....

4

1 に答える 1

0

ラジオのグループごとにフィールドセットを使用して、ラジオをより正確に制御したり、グループの周囲にのみマージンを設定したりできるようにしてください。

ラベルを使用して、ラベル/入力グループにまたがることができるため、ラベルをより適切に制御できます。

<span>
    <label for="name">Value</label>
    <input type="checkbox" name="name" value="1"/>
</span>

また、入力に固有のクラスを使用する場合は、次のようにブロックで表示することができます。

input.block {
    display: block;
}

次に、このクラスブロックを入力に配置すると、ラベルは別の行に残ります...

全体像については、このフィドルを参照してください。

http://jsfiddle.net/BxwNL/1/

更新：シナモンコメントによる別の解決策

アイテムのリストを使用することもできますが、色のリスト、タイプのリストなど、プロパティに従ってグループ化すると意味があります...

使用法は次のようになります。

<ul>
    <li>
        <label for="name">Value</label>
        <input type="checkbox" name="name" value="1"/>
    </li>
    <li>
        <label for="name2">Value2</label>
        <input type="checkbox" name="name2" value="2"/>
    </li>
</ul>

リストソリューションのフィドルの例：http： //jsfiddle.net/BxwNL/2/

于 2013-02-16T00:14:09.270 に答える