23

これらの無線入力を、上下に並べるのではなく、画面全体に広げるようにします。

HTML

<input type="radio" name="editList" value="always">Always
<br>
<input type="radio" name="editList" value="never">Never
<br>
<input type="radio" name="editList" value="costChange">Cost Change

CSS

input[type="radio"] {
    margin-left:10px;
}

http://jsfiddle.net/clayshannon/8wRT3/13/

私はディスプレイのプロパティをいじくり回し、ググって答えを探しましたが、見つけられませんでした。

4

4 に答える 4

41

あなたの場合、要素間の改行（<br>タグ）を削除するだけです-input要素はinline-blockデフォルトで（少なくともChromeでは）です。(更新された例) .

<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change

<label>ただし、要素を使用することをお勧めします。その際、ラベルをクリックすると要素もチェックされます。<label>のfor属性を<input>のid: (例)に関連付けます。

<input type="radio" name="editList" id="always" value="always"/>
<label for="always">Always</label>

<input type="radio" name="editList" id="never" value="never"/>
<label for="never">Never</label>

<input type="radio" name="editList" id="change" value="costChange"/>
<label for="change">Cost Change</label>

<label>..または、要素を要素の周りに直接ラップし<input>ます: (例)

<label>
    <input type="radio" name="editList" value="always"/>Always
</label>
<label>
    <input type="radio" name="editList" value="never"/>Never
</label>
<label>
    <input type="radio" name="editList" value="costChange"/>Cost Change
</label>

:checkedまた、凝って疑似クラスを使用することもできます。

于 2013-09-25T20:41:03.220 に答える
1

ここに更新されたフィドルがあります

</br>入力無線の間を単に削除します

<div class="clearBoth"></div>
<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change
<div class="clearBoth"></div>
于 2013-09-25T20:41:47.617 に答える