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

我有一个html输入。

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

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

例子

当前回答

这就是为什么我们在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的解决方案，请查看其他答案。

其他回答

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

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

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

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

这就是为什么我们在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的解决方案，请查看其他答案。

试试这个:

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

假设我在一个15px填充的容器中，这是我总是用于内部部分的:

width:auto;
right:15px;
left:15px;

这将把内部部分拉伸到任何宽度，它应该小于15px两侧。

推荐文章