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

Question

我希望这些 radio 输入在屏幕上延伸，而不是一个在另一个下面:

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 中)。 (updated example) .

<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 : (example)

<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> 周围的元素元素直接:(example)

<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 pseudo class .