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

我有一个html输入。

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

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

例子

当前回答

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

生活的例子

其他回答

把它包在容器里怎么样?容器应该有这样的风格:

{
    width:100%;
    border: 10px solid transparent;
}

生活的例子

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

padding: 5%;
width: 90%;

试试这个:

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

Box-sizing: border-box是一个快速，简单的方法来修复它:

这将适用于所有现代浏览器和IE8+。

这里是一个演示:http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

在现代浏览器中不需要浏览器前缀版本(-webkit-box-sizing等)。

推荐文章