栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

HTML / CSS中的单选/复选框对齐

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

HTML / CSS中的单选/复选框对齐

我想我终于解决了问题。一种通常推荐的解决方案是使用vertical-align:middle:

<input type="radio" > Label

然而,问题在于,即使从理论上讲它仍然会产生可见的未对准。CSS2规范指出:

vertical-align:middle: 将框的垂直中点与父框的基线对齐,再加上父框的x高度的一半。

因此,它应该位于完美的中心(x高度是字符x的高度)。但是,该问题似乎是由于浏览器通常在单选按钮和复选框中添加了一些随机的不均匀边距引起的。例如,您可以使用Firefox在Firefox中检查Firefox的默认复选框边距为

3px3px 0px 5px
。我不确定它来自哪里,但其他浏览器的利润似乎也差不多。因此,要获得完美的一致性,就需要摆脱这些空白:

<input type="radio" > Label

仍然值得一提的是,在基于表的解决方案中,边距以某种方式被吞噬,并且所有内容都很好地对齐。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/416240.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号