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的盒子模型。正如您在illustration of the respective MDN article中看到的那样，每个元素的框中有4个不同的区域：边距框，边框框，填充框和内容框。

当您为元素分配度量（width或height）时，会将其应用于其中一个区域。如果该区域是例如内容框，则对于元素边缘的总大小，添加边界和填充。因此，您不会设置框的总尺寸，而是设置其中一个框。

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

Answer 2

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

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

300px - 22px = 278px

div {border：1px solid red;宽度：300像素; }
输入{宽度：278px;填充：10px; }

Answer 3

为什么你也不把填充率也用百分比：

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

带填充和百分比宽度的输入元素超过父div

3 个答案: