如何使用 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 的回答中的两个建议。我的主要目的是防止在单选按钮下换行，所以这个解决方案暂时没问题。

Answer 3

既然我上面问了如何处理很长的标签，最后我自己解决了。 这是我的问题的解决方案。 也许它可以帮助你？

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

Answer 4

输入并标记两者

float: left;
display: block;

设置标签和输入的宽度。

---

申请

clear: both;
 vertical-align: middle;

给所有的 li's。

Answer 5

你应该使用white-space: normal; 在多行标签中