HTML输入要素宽于Containing Div

发布时间：2020-12-14 21:40:38 所属栏目：资源来源：网络整理

导读：我有一个html元素包含在一个div。高度由外部div指定，输入控件的高度和宽度为100％。在最基本的层面上，我有一个问题，文本框延伸到包含div的右边。基本示例代码： div style="height:25px; width: 150px;" input type="text" style="height:100%; width:10

我有一个html元素包含在一个div。高度由外部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}

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

保罗·爱尔兰有很好的说明这个技巧http://paulirish.com/2012/box-sizing-border-box-ftw

他对填充的要点也适用于边界。

甚至还有一个指南针mixin来更容易地支持旧的浏览器。 (http://compass-style.org/reference/compass/css3/box_sizing/)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!