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;
}