如何让输入无线电元素水平对齐？

Question

我希望这些无线电输入在屏幕上伸展,而不是一个在另一个之下:

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/

我已经开始使用显示属性,谷歌搜索,然后敲打(砰？砰？？)寻找答案,但没有找到答案.

Answer 1

在您的情况下,您只需要删除<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伪类.

Answer 2

这也很有魅力

<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>