如何使用 CSS 为 HTML 表单中的单选按钮制作多行、垂直和水平对齐的标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/911644/
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 make multi-line, vertically and horizontally aligned labels for radio buttons in HTML Forms with CSS?
提问by Patrick Klingemann
Assuming the following markup:
假设有以下标记：
<fieldset>
<legend>Radio Buttons</legend>
<ol>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
</ol>
</fieldset>
How do I style radio button labels so that they look like the following in most browsers (IE6+, FF, Safari, Chrome:
我如何设置单选按钮标签的样式，使其在大多数浏览器（IE6+、FF、Safari、Chrome）中看起来如下所示：
采纳答案by Patrick Klingemann
Using the following markup and css I was able to produce multi-line labels that do not wrap under the radio button:
使用以下标记和 css，我能够生成不包含在单选按钮下的多行标签：
<style type="text/css">
fieldset input, label {
float: left;
display: block;
}
fieldset li {
clear: both;
}
</style>
<fieldset>
<ol>
<li>
<input type="radio" id="x" />
<label for="x">
stuff<br/>
stuff1
</label>
</li>
<li>
<input type="radio" id="x" />
<label for="x">
stuff<br/>
stuff1
</label>
</li>
</ol>
</fieldset>
however I was unable to use:
但是我无法使用：
fieldset label {
vertical-align: middle;
}
to center the label vertically on the radio button, even when applying a width (both suggestions in Dmitri Farkov's answer. My main purpose was to prevent wrapping under the radio button, so this solution will be fine for the time being.
将标签垂直居中在单选按钮上，即使在应用宽度时（Dmitri Farkov 的回答中的两个建议。我的主要目的是防止在单选按钮下换行，所以这个解决方案暂时没问题。
回答by Ryan Florence
I believe this does it all. You didn't mention that it has to validate, however, so I used the inline-block (-moz-inline-box) display. One of my favorites, actually.
我相信这可以解决所有问题。但是，您没有提到它必须进行验证，因此我使用了内联块 (-moz-inline-box) 显示。我的最爱之一，事实上。
Tested in Safari 3, FireFox 3, and IE7.
在 Safari 3、FireFox 3 和 IE7 中测试。
<style type="text/css">
ol{
padding-left: 0;
margin-left:0;
}
ol>li {
list-style-type: none;
margin-bottom: .5em;
}
ol>li input[type=radio] {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
}
ol>li label {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
}
</style>
回答by UlfR
Since I asked how to handle really long labels above, and I finally solved it myself. Here is the solution to myproblem. Maybe it could help you to?
既然我上面问了如何处理很长的标签，最后我自己解决了。这是我的问题的解决方案。也许它可以帮助你？
<style type="text/css">
#master_frame {
background: #BBB;
height: 300px;
width: 300px;
}
fieldset.radios {
border: none;
}
fieldset fields {
clear: both;
}
input {
float: left;
display: block;
}
label {
position: relative;
margin-left: 30px;
display: block;
}
</style>
<div id="master_frame">
<fieldset class='radios'>
<div class='field'>
<input type="radio" id="a" />
<label for="a">Short</label>
</div>
<div class='field'>
<input type="radio" id="b" />
<label for="b">
A really long and massive text that does not fit on one row!
</label>
</div>
</fieldset>
</div>
回答by Dmitri Farkov
Make input and label both
输入并标记两者
float: left;
display: block;
Set width's for the label and input.
设置标签和输入的宽度。
apply
申请
clear: both;
vertical-align: middle;
to all the li's.
给所有的 li's。
