如何在HTML表单CSS中为单选按钮制作多行，垂直和水平排列的标签？ [英] How can I make multi-line, vertically and horizontally aligned labels for radio buttons in HTML Forms with CSS?

问题描述

假设有以下标记：

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

这篇关于如何在HTML表单CSS中为单选按钮制作多行，垂直和水平排列的标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！