我希望这些无线电输入横跨屏幕,而不是一个在另一个之下:
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.
这篇关于如何让输入单选元素水平对齐?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!