头闻号

历城区华轩化工产品经营部

其他造纸化学品|其他皮革化学品|医药中间体|其他农药原药|食品添加剂|其他化学试剂

首页 > 新闻中心 > 科技常识:实现checkbox&radio对齐的方法
科技常识:实现checkbox&radio对齐的方法
发布时间:2023-02-01 10:49:39        浏览次数:4        返回列表

今天小编跟大家讲解下有关实现checkbox&radio对齐的方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关实现checkbox&radio对齐的方法 的相关资料,希望小伙伴们看了有所帮助。

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

重置 form checkbox & radio

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

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

1、css代码

.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; *vertical-align: 1px;}

2、html代码

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

3、效果图

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持爱蒂网!

来源:爱蒂网