form radio & checkbox解决方案

orm radio & checkbox 的对齐一直是个问题，不仅不同浏览器不同，不同的字体,不同的文字大小也会表现不一样，相信纠结了一大批人，如果没有好好整理总结下得出一个经验，相信每次碰到这个鬼东西都是比较纠结的，很头疼啊

重置form radio & checkbox

因为不同浏览器解析不一样，有些默认margin，有些是默认padding，还有ie6,7连margin和padding即使设置为0后，所占的空间还是比较大，所以还是有必须重置下，一下就能解决很多麻烦

Css Code

/*reset form elements*/
input, select, label {
    vertical-align:middle;
}
/*reset form radio & checkbox*/
.form-radio,.form-checkbox{
    margin:0 5px 0 0;/*与右侧文字的间距*/
    padding:0;
    width:13px;
    height:13px;
    vertical-align:middle;
    font:13px Helvetica, Arial, sans-serif;
}

demo 1 12px

举报类型： 

垃圾广告色情虚假广告其他

demo 2 13px

举报类型： 

垃圾广告色情虚假广告其他

demo 3 14px

举报类型： 

垃圾广告色情虚假广告其他

demo 4 16px

举报类型： 

垃圾广告色情虚假广告其他

Html Code

<form id="demo1" class="demo" name="form1" method="post" action="#">
    <div class="form-item">
        <label>举报类型：</label>
        <div class="form-special-wrap">
        <label><input type="radio" checked="checked" value="1" class="form-radio" name="reportType">垃圾广告</label><label><input type="radio" value="2" class="form-radio" name="reportType">色情</label><label><input type="radio" value="3" class="form-radio" name="reportType">虚假广告</label><label><input type="radio" value="4" class="form-radio" name="reportType">其他</label>
        </div>
    </div>                     
</form>

Css Code

.form-item label{
    font-weight:bold;
}
.form-special-wrap{
    display:inline-block;*display:inline;*zoom:1;
}
.form-special-wrap label{
    font-weight:normal;
}
#demo2{
    font-size:13px;
}
#demo3{
    font-size:14px;
}
#demo4{
    font-size:16px;
}

总：从上面四个实例我们可以看出对比的明显效果，在这里我们除了重置之外，只是设置了字体大小。各个浏览器都表现不一样，其中ie7表现最佳了，看起来是居中的哦呵呵。火狐默认的form-radio的line-height为15px(即字体大小加上3像素)，在css中使用line-height不能覆盖这个默认的行高，而谷歌和ie8,9浏览器看起来是设置的line-height，可是根本不管用啊，这个还只有ie7表现良好呵呵,line-height不能解决这个对齐问题，那只好用vertical-align来试试了

实验性解决

这个鬼东西确实挺复杂的，所以我也不能确定这样就ok了，只能提出一个实验性的解决方案，第一步当然就是reset喽，第二步根据自己设置的字体大小来设置form-radio的vertical-align，最后对ie6进行对齐修正，打上bug。（这个修订版本是后加了，为了简单）

demo 1 12px 修正版

举报类型： 

垃圾广告色情虚假广告其他

demo 2 13px 修正版

举报类型： 

垃圾广告色情虚假广告其他

demo 3 14px 修正版

举报类型： 

垃圾广告色情虚假广告其他

demo 4 16px 修正版

举报类型： 

垃圾广告色情虚假广告其他

Css Code

#demo1fix .form-radio{
    vertical-align:-2px;
    *vertical-align:middle;/*ie7 ie6*/
    _vertical-align:3px;/*ie6*/
}
#demo2fix .form-radio{
    vertical-align:-2px;
    *vertical-align:middle;/*ie7 ie6*/
    _vertical-align:3px;/*ie6*/
}
#demo3fix .form-radio{
    vertical-align:-1px;
    *vertical-align:middle;/*ie7 ie6*/
    _vertical-align:2px;/*ie6*/
}
#demo4fix .form-radio{
    vertical-align:0;
    *vertical-align:middle;/*ie7 ie6*/
    _vertical-align:3px;/*ie6*/
}

form checkbox

checkbox和radio应该是亲兄弟了，既然搞定了radio，那么就借机搞定下checkbox吧,我们把上面的radio的类型改成checkbox，然后把class改为form-checkbox就可以了，这次我们给出一个对齐的最终demo

demo 5 16px

举报类型： 

垃圾广告色情虚假广告其他

Css Code

#demo5{
    font-size:16px;
}
#demo5 .form-checkbox{
    vertical-align:0;/*根据不同的font-size设置不同的具体值*/
    *vertical-align:middle;/*ie7 ie6*/
    _vertical-align:3px;/*ie6 根据不同的font-size设置不同的具体值*/
}

相信看了上面的案例，大家都表示非常纠结吧，使用vertical来调那简直是折磨啊，不过这也是一种办法，能解决问题哈哈。下面我们介绍另一种方法，那就是float方法，当然如果为了好控制我们得标签可能得相对多那么一点。这个的思路就是把文字用span包裹起来，然后设置checkbox和span都float，然后再设置checkbox的margin-top就可以了，很是方便的，同理radio了。当然重置还是得要的啊

兴趣爱好：

音乐小说上网

Html Code

<form id="demo6" class="demo form-horizontal" name="demo6" method="post" action="#">
    <div class="form-item form-radio-checkbox-wrap">
        <label>兴趣爱好：</label>
        <div class="form-field">
            <label><input type="checkbox" checked="checked" value="1" class="form-checkbox" name=""><span>音乐</span></label>
            <label><input type="checkbox" value="2" class="form-checkbox" name=""><span>小说</span></label>
            <label><input type="checkbox" value="3" class="form-checkbox" name=""><span>上网</span></label>
        </div>
    </div>
 </form>

Css Code

#demo6{
    overflow:auto;*zoom:1;
}
.form-horizontal label{
    float: left;
    text-align: right;
    font-weight:bold;
    width:100px;
    font-size:16px;
    line-height:24px;
}
.form-horizontal .form-field{
    float:left;
}
.form-radio-checkbox-wrap .form-field label{
    text-align: left;
    width: auto;
    font-weight:normal;
    margin:0 10px 0 0;
    float:left;
    display:inline;
}
.form-radio-checkbox-wrap .form-checkbox,
.form-radio-checkbox-wrap span{
    float:left;
    display:inline;
}
.form-radio-checkbox-wrap .form-checkbox{
    margin-right:5px;
    margin-top:5px;
}