HTML 如何使元素宽度：100%减去填充？

我有一个 html 输入。

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

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

例

分割线

网友回答：

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等较旧的浏览器不支持此功能。如果您正在寻找适用于旧IE的解决方案，请查看其他答案。

分割线

网友回答：

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

padding: 5%;
width: 90%;

模板简介：该模板名称为【 HTML 如何使元素宽度：100%减去填充？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。