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

How can I make multi-line, vertically and horizontally aligned labels for radio buttons in HTML Forms with CSS?(如何使用 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)中看起来如下所示:

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.

这篇关于如何使用 CSS 为 HTML 表单中的单选按钮制作多行、垂直和水平对齐的标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！