我正在尝试将一行 span 置于其相应输入框上方的中心位置。跨度和输入都将宽度设置为 150px,但是跨度渲染比 FF 和 IE 中的输入小约 2px。这会导致所有标签向左移动其预期位置,并且每个新标签的移动变得更加剧烈。可能需要注意的是,我已将 span 的显示属性更改为:inline-block。有没有比在 span 的宽度上增加 +4px 更好的方法来解决这个问题?
我这里有一个例子:http://jsfiddle.net/kDcKB/5/
有人可以帮忙吗?
最佳答案
那是因为盒子模型。边框 + 宽度在每个元素上的总和方式不同。
试试这个:http://jsfiddle.net/easwee/kDcKB/8/
或更改 .txtTest
的 box-sizing 属性
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
关于html - 在输入居中问题上对齐跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6911736/