如何让输入单选元素水平对齐?

How can I get input radio elements to horizontally align?(如何让输入单选元素水平对齐?)

问题描述

我希望这些无线电输入横跨屏幕，而不是一个在另一个之下:

I want these radio inputs to stretch across the screen, rather than one beneath the other:

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/

我一直在研究显示属性，并在谷歌上搜索，然后砰(砰?撞?)寻找答案，但还没有找到答案.

I've monkeyed around with the display properties, and googled, and bang (bung? binged?) for an answer, but haven't found one.

推荐答案

在你的情况下，你只需要删除元素之间的换行符(<br> 标签) - input 元素默认是 inline-block (至少在 Chrome 中).(更新示例).

In your case, you just need to remove the line breaks (<br> tags) between the elements - input elements are inline-block by default (in Chrome at least). (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 相关联:(示例)

---

I'd suggest using <label> elements, though. In doing so, clicking on the label will check the element too. Either associate the <label>'s for attribute with the <input>'s 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> 元素周围:(示例)

..or wrap the <label> elements around the <input> elements directly: (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 伪类.

You can also get fancy and use the :checked pseudo class.

这篇关于如何让输入单选元素水平对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！