如何在没有表格标签的情况下以 html 形式创建垂直单选按钮组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12175483/
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 to create Vertical Radio Button Group in html form without table tag
提问by John
How to create vertical Radio Button Group instead of horizontal button group in an html form?
如何在 html 表单中创建垂直单选按钮组而不是水平按钮组？
I don't want to use a table for this. Is there any property/attribute available?
我不想为此使用表格。是否有可用的属性/属性？
Any type of help/suggestion would be appreciated, thanks.
任何类型的帮助/建议将不胜感激，谢谢。
回答by Chelsea Urquhart
There are three ways you can do it: two with CSS or 1 with oldschool html:
有三种方法可以做到：两种使用 CSS 或一种使用 oldschool html：
1) The preferred way would be to use a CSS class. (ie add class="block"to the element and then .block {display:block}to your stylesheet.
1) 首选方法是使用 CSS 类。（即添加class="block"到元素，然后.block {display:block}到你的样式表。
2)Inline styles: Add style="display:block"to the element.
2)内联样式：给元素添加style="display:block"。
3)HTML: Add a hard break (br) element after the radio element (or enclose the elements each in a div or p element.)
3)HTML：在 radio 元素之后添加一个硬中断 (br) 元素（或将每个元素括在一个 div 或 p 元素中。）
Example:
例子：
<style type="text/css">
.block {
display: block;
}
</style>
...
...
<form>
<label class="block"><input type="radio" name="radgroup" value="A">Option A</label>
<label class="block"><input type="radio" name="radgroup" value="B">Option B</label>
<label class="block"><input type="radio" name="radgroup" value="C">Option C</label>
<label class="block"><input type="radio" name="radgroup" value="D">Option D</label>
</form>
