我有一个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/

10-12 00:17
查看更多