以前也遇到过，每次遇到每次犯怵，可是总是没有当回事，好好总结一下，今天看了为之哥的文章，特别总结一下。
radio和checkbox最让人头疼的就是他们跟后面的文本怎么能够居中显示呢？而且还兼容各浏览器？一个方法就是用vertical-align调整，一个就是用float解决。
在处理前有点很重要的就是重置radio和checkbox样式，原因就是不同浏览器解析不一样，有些默认margin，有些是默认padding，还有ie6,7连margin和padding即使设置为0后，所占的空间还是比较大，所以还是有必须重置下，一下就能解决很多麻烦
1 <form id="demo1" class="demo demo1fix" name="form1" method="post" action="#"> 2 <div class="form-item"> 3 <label>举报类型：</label> 4 <div class="form-special-wrap"> 5 <label><input type="radio" checked="checked" value="1" class="form-radio" name="reportType">垃圾广告</label> 6 <label><input type="radio" value="2" class="form-radio" name="reportType">色情</label> 7 <label><input type="radio" value="3" class="form-radio" name="reportType">虚假广告</label> 8 <label><input type="radio" value="4" class="form-radio" name="reportType">其他</label> 9 </div> 10 </div> 11 </form>
1 /*reset form elements*/ 2 input, select, label { 3 vertical-align:middle; 4 } 5 /*reset form radio & checkbox*/ 6 .form-radio,.form-checkbox{ 7 margin:0 5px 0 0;/*与右侧文字的间距*/ 8 padding:0; 9 width:13px; 10 height:13px; 11 vertical-align:middle; 12 font:13px Helvetica, Arial, sans-serif; 13 }
用vertical-align是，因为谷歌和ie8,9浏览器看起来是设置的line-height，可是根本不管用，而且这个还需要考虑你用的字体大小，再做调整，因为ie7表现都一直很良好，所以需要对ie6进行hack处理。下面是修正问题的css代码：
1 #demo1fix .form-radio{/*font-size:12px*/ 2 vertical-align:-2px; 3 *vertical-align:middle;/*ie7 ie6*/ 4 _vertical-align:3px;/*ie6*/ 5 } 6 #demo2fix .form-radio{/*font-size:13px*/ 7 vertical-align:-2px; 8 *vertical-align:middle;/*ie7 ie6*/ 9 _vertical-align:3px;/*ie6*/ 10 } 11 #demo3fix .form-radio{/*font-size:14px*/ 12 vertical-align:-1px; 13 *vertical-align:middle;/*ie7 ie6*/ 14 _vertical-align:2px;/*ie6*/ 15 } 16 #demo4fix .form-radio{/*font-size:16px*/ 17 vertical-align:0; 18 *vertical-align:middle;/*ie7 ie6*/ 19 _vertical-align:3px;/*ie6*/ 20 }
还有一种方法是用float方法，就是label，float:left,然后把提示文本外面再包层span，把这个span也浮动float：left
1 <form id="demo6" class="demo form-horizontal" name="demo6" method="post" action="#"> 2 <div class="form-item form-radio-checkbox-wrap"> 3 <label>兴趣爱好：</label> 4 <div class="form-field"> 5 <label><input type="checkbox" checked="checked" value="1" class="form-checkbox" name=""><span>音乐</span></label> 6 <label><input type="checkbox" value="2" class="form-checkbox" name=""><span>小说</span></label> 7 <label><input type="checkbox" value="3" class="form-checkbox" name=""><span>上网</span></label> 8 </div> 9 </div> 10 </form>
1 #demo6{ 2 overflow:auto;*zoom:1; 3 } 4 .form-horizontal label{ 5 float: left; 6 text-align: right; 7 font-weight:bold; 8 width:100px; 9 font-size:16px; 10 line-height:24px; 11 } 12 .form-horizontal .form-field{ 13 float:left; 14 } 15 .form-radio-checkbox-wrap .form-field label{ 16 text-align: left; 17 width: auto; 18 font-weight:normal; 19 margin:0 10px 0 0; 20 float:left; 21 display:inline; 22 } 23 .form-radio-checkbox-wrap .form-checkbox, 24 .form-radio-checkbox-wrap span{ 25 float:left; 26 display:inline; 27 } 28 .form-radio-checkbox-wrap .form-checkbox{ 29 margin-right:5px; 30 margin-top:5px; 31 }
要是想看详情，还是看为之哥的经典：http://www.w3cplus.com/solution/formradio/formradio.html