HTML 输入元素比 Containing Div 宽

Question

我有一个包含在 div 中的 html 元素。高度由外部 div 决定，输入控件的高度和宽度为 100%。在最基本的层面上，我遇到了一个问题，即文本框超出了包含的 div 的右侧。

基本示例代码:

<div style="height:25px; width: 150px;">
     <input type="text" style="height:100%; width:100%"  />
</div>

此控件的呈现比这复杂得多，但是当控件被剥离到这个级别时，我仍然遇到文本框超出包含的 div 的问题。

Answer 1

您可以使用 box-sizing:border-box 来解决这个问题。只需将以下内容放入您的 css 文件中:

input{box-sizing:border-box} 

这意味着输入框上的边框实际上是在输入宽度的内部，而不是添加到外部。这就是使输入大于容器的原因。

Paul Irish 有一篇很好的文章解释了这项技术 http://paulirish.com/2012/box-sizing-border-box-ftw

他关于填充的观点也适用于边框。

甚至还有一个 compass mixin 可以更轻松地支持旧版浏览器。 ( http://compass-style.org/reference/compass/css3/box_sizing/ )