宽度：100％

2018-07-01 16:54:21

我有一个html输入。

输入有padding: 5px 10px; 我希望它是父div的宽度的100％（这是流畅的）。

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

例

在这里阅读其他答案，或者阅读这个答案：宽度设置为100％时，div的内容会比div更长吗？

box-sizing: border-box是一种快速简单的方法来修复它：

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

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

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

如果你需要这个在IE7中工作，你可以阅读这个答案的旧版本。

这就是为什么我们在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这样的旧版浏览器不支持这一点。如果您正在寻找适用于旧IE的解决方案，请查看其他答案。

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

padding: 5%;
width: 90%;

链接地址: http://www.djcxy.com/p/88399.html

上一篇: width: 100%