如何制作元素宽度:100%减去填充？

提问者：小点点

我有一个html输入。

输入有padding:5px10px；我希望它是父div宽度的100%（它是流动的）。

但是，使用width:100%；会导致输入为100%+20px，我该如何解决这个问题呢？

示例

共3个答案

匿名用户

Box-Sizing:Border-Box是一种快速简便的修复方法:

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

下面是一个演示:http://jsfiddle.net/thirtydot/qkmsk/301/

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

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

匿名用户

这就是为什么我们在CSS中有box-sizing。

我已经编辑了您的示例，现在它可以在Safari，Chrome，Firefox和Opera中运行。查看一下:http://jsfiddle.net/mathias/bupr3/我只添加了以下内容:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

不幸的是，像IE7这样的旧浏览器不支持这一点。如果您正在寻找一个在旧的IEs中工作的解决方案，请查看其他答案。

匿名用户

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

padding: 5%;
width: 90%;