form checkbox & radio 解决方案

form checkbox & radio

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

重置 form checkbox & radio

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

以下是 14px Arial 字体的解决方案

CSS Code：

1 2 3 4 5 6 7 8 9 10 11

.form { font : 14px / 18px Arial , Helvetica , sans-serif ; } .form input, .form label { vertical-align : middle ; } .form label { margin-right : 6px ; } .form_checkbox, .form_radio {      margin : 0 3px 0 0 ; /*与右侧文字的间距*/      padding : 0 ;      width : 13px ;      height : 13px ;      /*ie7 ie6 根据不同的 font-size 设置不同的值*/      * vertical-align : 1px ; }

HTML Code：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

< form name = "form1" method = "post" action = "" class = "form" >    < p >      < input type = "checkbox" name = "checkbox4" id = "checkbox4" class = "form_checkbox" >      < label for = "checkbox4" >checkbox4</ label >      < input type = "checkbox" name = "checkbox5" id = "checkbox5" class = "form_checkbox" >      < label for = "checkbox5" >checkbox5</ label >      < input type = "checkbox" name = "checkbox6" id = "checkbox6" class = "form_checkbox" >      < label for = "checkbox6" >checkbox6</ label >    </ p >    < p >      < input type = "radio" name = "radio" id = "radio4" value = "radio4" class = "form_radio" >      < label for = "radio4" >radio4</ label >      < input type = "radio" name = "radio" id = "radio5" value = "radio5" class = "form_radio" >      < label for = "radio5" >radio5</ label >      < input type = "radio" name = "radio" id = "radio6" value = "radio6" class = "form_radio" >      < label for = "radio6" >radio6</ label >    </ p > </ form >