如何使用 CSS 为 HTML 表单中的单选按钮制作多行、垂直和水平对齐的标签?
假设以下标记:
<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>
如何设置单选按钮标签的样式，使其在大多数浏览器(IE6+、FF、Safari、Chrome)中看起来如下所示:
How do I style radio button labels so that they look like the following in most browsers (IE6+, FF, Safari, Chrome:
推荐答案
使用以下标记和 css，我能够生成不包含在单选按钮下的多行标签:
Using the following markup and css I was able to produce multi-line labels that do not wrap under the radio button:
<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>
但是我无法使用:
fieldset label {
vertical-align: middle;
}
在单选按钮上垂直居中标签，即使在应用宽度时也是如此(Dmitri Farkov 的回答中的两个建议.我的主要目的是防止在单选按钮下换行，所以这个解决方案暂时可以.
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.
相关文章