form radio & checkbox解决方案

　　以前也遇到过，每次遇到每次犯怵，可是总是没有当回事，好好总结一下，今天看了为之哥的文章，特别总结一下。

　　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

 

posted @ 2012-12-15 15:45  enggirl  阅读(349)  评论(0)  编辑  收藏  举报