如何使输入单选按钮元素水平对齐？

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/

我已经调整了显示属性，进行了谷歌、必应搜索，但没有找到答案。

- B. Clay Shannon-B. Crow Raven

---

你可以先去掉它们之间的换行。如果它们还没有在同一行上，那么尝试使用float: left;或其他方式。 - Chad

@Chad - 不需要浮动它们，它们默认是内联的。 - j08691

你真的应该使用label元素，它有助于减少歧义（哪个文本是为哪个控件而设的？） - cimmanon

除非它们被放置在一行并且数量较多，否则对于用户来说它们是含糊不清的。没有标签的单选框（和复选框）激活区域太小，很多用户难以准确地点击。 - cimmanon

... 你迫切地期待着答案 ... - littlegreen

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

---

我建议使用元素。这样做，点击标签也会选中该元素。将的for属性与的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伪类。

- Josh Crozier

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>

- BLESSING

Answer 3

为了让您的单选按钮水平列出，只需在声明 asp:radiobuttonlist 的 .aspx 文件中添加 RepeatDirection="Horizontal"。

- Arjun

Answer 4

这里是更新的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>

- Naveen Kumar Alone