使用纯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>

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

Answer 1

将无线电定位在标签下面并不像有些人想要的那样干净,没有任何额外的DOM,但是这里有一个大概有效的方法:

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