源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 2036|回复: 0

[CSS/Html] 前端中实现checkbox&radio对齐的方法

[复制链接]

3095

主题

3493

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
266463
发表于 2023-3-30 22:45:38 | 显示全部楼层 |阅读模式

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

重置 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. </form>
复制代码

3、效果图



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

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-14 10:01 , Processed in 0.029155 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明