html - 如何使用 CSS 为 HTML 表单中的单选按钮制作多行、垂直和水平对齐的标签？

Question

假设以下标记:

<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)中看起来像下面这样:

Answer 1

我相信这就是全部。但是，您没有提到它必须验证，所以我使用了内联 block (-moz-inline-box) 显示。实际上，这是我的最爱之一。

Here's a working copy

在 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>