html - 使用纯 CSS 使单选组标签与单选按钮很好地内联显示

Question

之前我使用表格来显示带有标签的单选按钮。现在，我尝试仅使用 CSS 来做同样的事情。

我可以在 CSS 中做些什么来使标签文本很好地位于相关单选按钮的顶部？这是 HTML:

<div class="controls">
    <label class="radio">
        <input type="radio" name="cfimb_5" id="id_cfimb_5_1" value="1">
        Never
    </label>
    <label class="radio">
         <input type="radio" name="cfimb_5" id="id_cfimb_5_2" value="2">
    </label>
    <label class="radio">
        <input type="radio" name="cfimb_5" id="id_cfimb_5_3" value="3">
        Sometimes
    </label>
    <label class="radio">
        <input type="radio" name="cfimb_5" id="id_cfimb_5_4" value="4">
    </label>
    <label class="radio">
        <input type="radio" name="cfimb_5" id="id_cfimb_5_5" value="5">
        Frequently
    </label>
</div>

这是一个代码笔:http://codepen.io/anon/pen/keuhl

Answer 1

过去，您可以使用边距来实现这种布局:

.controls label {
    display: inline-block;
    width: 90px;
    height: 20px;
    text-align: center;
    vertical-align: top;
    padding-top: 40px;
}
.controls input {
    display: block;
    margin: 0 auto -40px;
}

<div class="controls">
  <label class="radio">
    <input type="radio" name="foo" value="1">
    Never
  </label>
  <label class="radio">
     <input type="radio" name="foo" value="2">
  </label>
  <label class="radio">
    <input type="radio" name="foo" value="3">
    Sometimes
  </label>
  <label class="radio">
    <input type="radio" name="foo" value="4">
  </label>
  <label class="radio">
    <input type="radio" name="foo" value="5">
    Frequently
  </label>
</div>

在支持 flexbox 的现代浏览器上，解决方案要容易得多:

.controls {
  display: flex;
}

.radio {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

<div class="controls">
  <label class="radio">
    <input type="radio" name="foo" value="1">
    Never
  </label>
  <label class="radio">
     <input type="radio" name="foo" value="2">
  </label>
  <label class="radio">
    <input type="radio" name="foo" value="3">
    Sometimes
  </label>
  <label class="radio">
    <input type="radio" name="foo" value="4">
  </label>
  <label class="radio">
    <input type="radio" name="foo" value="5">
    Frequently
  </label>
</div>