如何使用 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）中看起来如下所示：

我相信这就能解决一切。但是，您没有提到它必须进行验证，因此我使用了内联块（-moz-inline-box）显示。事实上，我最喜欢的之一。

这是一个工作副本

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