如何获得输入单选元素以水平对齐？

B. Clay Shannon 发表于 Dev

克莱·香农

我希望这些无线电输入延伸到整个屏幕，而不是一个在另一个下面：

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

我四处寻找显示属性，然后用Google搜索，然后用bang（敲打吗？）来寻找答案，但没有找到答案。

乔什·克罗齐耶（Josh Crozier）

就您而言，您只需要删除<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>S' ：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伪类。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。