这是困扰我的CSS小问题之一。Stack Overflow周围的人们如何垂直对齐 checkboxes 以及他们 labels 始终如一的 跨浏览器 ?每当我在Safari中正确对齐它们(通常vertical-align: baseline在上使用input)时,它们在Firefox和IE中就完全关闭了。在Firefox中进行修复,不可避免地将Safari和IE弄乱了。每次编写表单时,我都会在此上浪费时间。
checkboxes
labels
vertical-align: baseline
input
这是我使用的标准代码:
<form> <div> <label><input type="checkbox" /> Label text</label> </div> </form>
我通常使用Eric Meyer的重置,因此表单元素相对而言是覆盖不大的。期待您提供的任何提示或技巧!
经过一个多小时的调整,测试和尝试不同样式的标记后,我认为我可能有一个不错的解决方案。该特定项目的要求是:
在进行任何解释之前,我只为您提供代码:
label { display: block; padding-left: 15px; text-indent: -15px; } input { width: 13px; height: 13px; padding: 0; margin:0; vertical-align: bottom; position: relative; top: -1px; *overflow: hidden; } <form> <div> <label><input type="checkbox" /> Label text</label> </div> </form>
此代码假定您使用的是类似Eric Meyer的重置,该重置不会覆盖表单输入的边距和填充(因此会将边距和填充重置放置在输入CSS中)。显然,在实际环境中,您可能会嵌套/覆盖东西以支持其他输入元素,但我想让事情保持简单。
注意事项:
*overflow
vertical-align
vertical-align: bottom
overflow: hidden
希望这对别人有帮助!除了今天早上正在研究的项目之外,我没有在其他项目上尝试过这种特定技术,因此,如果您发现一些更一致的方法,请务必进行尝试。