如何制作一个元素宽度:100%减去填充?

我有一个html输入。

输入有填充:5px 10px;我希望它是100%的父div的宽度(这是流体)。

然而使用宽度:100%;导致输入为100% + 20px我怎么才能解决这个问题呢?

例子

当前回答

试试这个:

width: 100%;
box-sizing: border-box;

其他回答

你可以尝试一些定位技巧。你可以把输入放在一个具有position: relative和固定高度的div中，然后在输入上有position: absolute;左:0;右:0;，以及任何你喜欢的填充。

生活的例子

对我来说，使用margin:15px;padding:10px 0 15px 23px;width:100%，结果是这样的:

我的解决方案是使用width:auto代替width:100%。我的新代码是:

边距:15px;填充:10px 0 15px 23px;宽度:自动。然后元素正确对齐:

只需要理解width:auto;宽度:100%; 宽度:汽车;将(自动)matic计算宽度，以适应准确给定的包装div，包括填充。 Width 100%扩展宽度并添加填充。

也使用百分比填充，并从宽度中删除:

padding: 5%;
width: 90%;

也许浏览器在上次回答这个问题后已经发生了变化，但这是我唯一可靠地完成这个任务的方法:

    width: auto;
    left: 0;
    right: 0;

然后你可以随心所欲地设置边距/填充，元素不会扩展到超出其可用宽度的范围。

这类似于@andology的答案，但如果你把左/右都设为0，那么你可以设置你想要的空白和/或填充。这是我的默认div。

推荐文章