html - 如何让输入单选元素水平对齐？

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>

Answer 3

要让您的单选按钮水平列出，只需添加

重复方向=“水平”

到声明 asp:radiobuttonlist 的 .aspx 文件。

Answer 4

这是更新的小提琴

只需</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>