web-dev-qa-db-ja.com

入力無線要素を水平方向に整列させるにはどうすればよいですか？

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

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/

私はディスプレイのプロパティを探し回ってグーグルで検索し、バング（bung？binged？）で答えを見つけましたが、見つかりませんでした。

htmlcssinputradio-button
13
B. Clay Shannon

あなたの場合は、要素間の改行（<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疑似クラス を使用することもできます。

28
Josh Crozier

ラジオボタンを水平にリストするには、追加するだけです

RepeatDirection = "Horizo​​ntal"

asp：radiobuttonlistが宣言されている.aspxファイルに。

1
Arjun

これも魅力のように機能します

<form>
    <label class="radio-inline">
      <input type="radio" name="optradio" checked>Option 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 2
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 3
    </label>
  </form>
1
John

ここで更新されます Fiddle

単に</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>
1
Naveen Kumar Alonekar