html – 使用纯CSS,使用单选按钮内联显示无线电组标签

概述以前我用表来显示带标签的单选按钮.现在我只想使用CSS做同样的事情. 我可以在CSS中做些什么来使标签文本很好地放在相关的单选按钮上？这是HTML： <div class="controls"> <label class="radio"> <input type="radio" name="cfimb_5" id="id_cfimb_5_1" value="1"> 以前我用表来显示带标签的单选按钮.现在我只想使用CSS做同样的事情.

我可以在CSS中做些什么来使标签文本很好地放在相关的单选按钮上？这是HTML：

<div >    <label >        <input type="radio" name="cfimb_5" ID="ID_cfimb_5_1" value="1">        Never    </label>    <label >         <input type="radio" name="cfimb_5" ID="ID_cfimb_5_2" value="2">    </label>    <label >        <input type="radio" name="cfimb_5" ID="ID_cfimb_5_3" value="3">        Sometimes    </label>    <label >        <input type="radio" name="cfimb_5" ID="ID_cfimb_5_4" value="4">    </label>    <label >        <input type="radio" name="cfimb_5" ID="ID_cfimb_5_5" value="5">        Frequently    </label></div>

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

解决方法 将无线电放置在标签下面并不像有些人想要的那样干净,没有任何额外的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 >  <label >    <input type="radio" name="cfimb_5" ID="ID_cfimb_5_1" value="1">    Never  </label>  <label >     <input type="radio" name="cfimb_5" ID="ID_cfimb_5_2" value="2">  </label>  <label >    <input type="radio" name="cfimb_5" ID="ID_cfimb_5_3" value="3">    Sometimes  </label>  <label >    <input type="radio" name="cfimb_5" ID="ID_cfimb_5_4" value="4">  </label>  <label >    <input type="radio" name="cfimb_5" ID="ID_cfimb_5_5" value="5">    Frequently  </label></div>

总结

以上是内存溢出为你收集整理的html – 使用纯CSS,使用单选按钮内联显示无线电组标签全部内容，希望文章能够帮你解决html – 使用纯CSS,使用单选按钮内联显示无线电组标签所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。