前端中实现checkbox&radio对齐的方法

洪七公

不仅不同浏览器不同，不同的字体,不同的文字大小也会表现不一样。

重置 form checkbox & radio

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

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

1、css代码

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

复制代码

2、html代码

1. <form name="form1" method="post" action="" class="form">
   
2.   
   
3.   <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>
   
4.   
   
5.   <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>
   
6. 
   
7. </form>

复制代码

3、效果图

以上就是锦尚中国关于前端中实现checkbox&radio对齐的方法，更多内容请搜索锦尚中国源码论坛获取，感谢大家的支持与厚爱！