html - 在输入居中问题上对齐跨度

标签 html css

我正在尝试将一行 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/

相关文章:

html - 如何检测css float 项是否溢出到下一行?

单击按钮时显示 DIV 容器的 Javascript 函数

javascript - 用其复选框包装一些输入并发送到数据库

html - 如何在 bootstrap 3 中构建圆形导航栏

javascript - Controller 中分配的 onclick 处理程序未执行

javascript - 是否可以将全尺寸图像从网站拖放到资源管理器中,其中仅显示缩略图

css - 浏览器之间的颜色(颜色)差异?

css - CakePHP css 图像路径不工作

javascript - 限制来自外部样式表的 CSS 不应用于 div 内的小部件

css - Bootstrap popover - 如何固定位置?