如何使用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

我相信这一切都做到了.但是,你没有提到它必须验证,所以我使用了内联块(-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>

Answer 2

使用以下标记和 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>

但是我无法使用：

fieldset label {
  vertical-align: middle;
}

将标签在单选按钮上垂直居中，即使在应用宽度时也是如此（Dmitri Farkov 的答案中的两个建议。我的主要目的是防止在单选按钮下包裹，所以这个解决方案暂时没问题。