如何让输入单选元素水平对齐?
我希望这些无线电输入横跨屏幕，而不是一个在另一个之下:
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.
相关文章