form radio & checkbox

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

小小赞助大大帮助

如果您觉得本文的内容对您的学习有所帮助:

支付鼓励

轻轻一点,是您对我的支持