Html 如何让输入无线电元素水平对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19014766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get input radio elements to horizontally align?
提问by B. Clay Shannon
I want these radio inputs to stretch across the screen, rather than one beneath the other:
我希望这些无线电输入在屏幕上延伸，而不是一个在另一个下面：
HTML
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
CSS
input[type="radio"] {
margin-left:10px;
}
http://jsfiddle.net/clayshannon/8wRT3/13/
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.
我一直在玩弄显示属性，用谷歌搜索，然后砰地一声（bung？binged？）寻找答案，但还没有找到。
回答by Josh Crozier
In your case, you just need to remove the line breaks (<br>tags) between the elements - inputelements are inline-blockby default (in Chrome at least). (updated example).
在您的情况下，您只需要删除<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
I'd suggest using <label>elements, though. In doing so, clicking on the label will check the element too. Either associate the <label>'s forattribute with the <input>'s id: (example)
不过，我建议使用<label>元素。这样做时，单击标签也会检查元素。要么将<label>'sfor属性与<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>
..or wrap the <label>elements around the <input>elements directly: (example)
..或直接将<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>
You can also get fancy and use the :checkedpseudo class.
你也可以花哨并使用:checked伪类。
回答by John
This also works like a charm
这也很有魅力
<form>
<label class="radio-inline">
<input type="radio" name="optradio" checked>Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3
</label>
</form>回答by Arjun
To get your radio button to list horizontally , just add
要让单选按钮水平列出，只需添加
RepeatDirection="Horizontal"
重复方向="水平"
to your .aspx file where the asp:radiobuttonlist is being declared.
到正在声明 asp:radiobuttonlist 的 .aspx 文件。
回答by Naveen Kumar Alonekar
Here is updated Fiddle
这是更新的小提琴
Simply remove </br>between input radio's
只需</br>在输入收音机之间删除
<div class="clearBoth"></div>
<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
<div class="clearBoth"></div>
