html - 具有填充和百分比宽度的输入元素超过父 div

Question

我有这个：

<div class="wrapper">
    <input type="text"/>
</div>

div{
    border: 1px solid red;
    width: 300px;
}

input{
    width: 100%;
    padding: 10px;
}

我需要输入是父 div 的 100%，但我也需要这个输入有 10px 填充。结果可以在这里看到：http: //jsfiddle.net/pdJYF/

我怎样才能做到这一点？

Answer 1

添加box-sizing到您的输入字段：

input{
       -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

• 示例小提琴
• 浏览器兼容性

---

潜在的“问题”是 HTML/CSS 的盒子模型。正如您在相应 MDN 文章的插图中所见，每个元素的框都有 4 个不同的区域：边距框、边框框、填充框和内容框。

当您将度量 (width或height) 分配给元素时，这将应用于这些区域之一。例如，如果该区域是内容框，则为元素边距、边框和填充的总大小添加。所以你不会设置盒子的总尺寸，而是它包含的盒子之一。

CSS 属性box-sizing告诉浏览器在计算元素尺寸时使用哪个框。默认值为content-box。因此，在上面的示例中，边距、边框和填充的值被添加，因此元素太大。通过将盒子模型设置为border-box，只有边距被添加到尺寸（这里为零）并且元素适合。

Answer 2

您必须从左右减少 2 倍的填充，并为您想要使用的任何像素减少 2 倍，并插入输入的宽度。

例如：20px（左右填充）+ 2px（左右边框）= 22px

300 像素 - 22 像素 = 278 像素

div {边框：1px纯红色；宽度：300 像素；}

输入{宽度：278px；填充：10px；}

Answer 3

为什么你也不将填充放在百分比中：

input{
   width: 94%;
   padding: 0 3%;
   border:0;
}