我有一个div中包含的html元素。高度由外部div决定,输入控件的高度和宽度为100%。在最基本的级别上,我遇到一个问题,其中文本框超出了包含div的权限。
基本示例代码:
<div style="height:25px; width: 150px;">
<input type="text" style="height:100%; width:100%" />
</div>
此控件的呈现远比此复杂得多,但是仍然将控件精简到此级别时,我有一个问题,即文本框会超出包含div的位置。
最佳答案
您可以使用box-sizing:border-box来解决这个问题。只需将以下内容放入您的css文件中:
input{box-sizing:border-box}
这意味着输入框上的边框实际上是在输入宽度内,而不是添加到外部。这就是使输入大于容器的原因。
保罗·爱尔兰(Paul Irish)的帖子很好,解释了这种技术http://paulirish.com/2012/box-sizing-border-box-ftw
他关于填充的观点也适用于边框。
甚至还有一个指南针混合器,可以更轻松地支持旧版浏览器。 (http://compass-style.org/reference/compass/css3/box_sizing/)
关于html - HTML输入元素宽于包含Div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/1633522/