如何使元素宽度：100% 减去填充？
我有一个 html 输入。
输入有 padding: 5px 10px; 我希望它是父 div 宽度的 100%（这是流动的）。
但是使用 width: 100%; 会导致输入为 100% + 20px 我该如何解决这个问题？
input 保留填充并支持 IE7
box-sizing: border-box 是一种快速、简单的修复方法：
这个 will work in all modern browsers，和 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%;
您可以在不使用 box-sizing 和 not clear 解决方案（如 width~=99%）的情况下做到这一点。
https://i.stack.imgur.com/Q2ydW.png
保留输入的填充和边框
添加到输入负水平边距 = 边框宽度 + 水平填充
添加到输入的包装器水平填充等于上一步的边距
HTML 标记：
<div class="input_wrap">
<input type="text" />
</div>
CSS：
div {
padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}
input {
width: 100%; /* force to expand to container's width */
padding: 5px 10px;
border: none;
margin: 0 -10px; /* negative margin = border-width + horizontal padding */
}
使用 css 计算（）
超级简单和真棒。
input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}
如下所示：Div width 100% minus fixed amount of pixels
由 webvitaly (https://stackoverflow.com/users/713523/webvitaly)
原始来源：http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/
刚刚复制到这里，因为我在另一个线程中几乎错过了它。
假设我在一个有 15px 填充的容器中，这就是我一直使用的内部部分：
width:auto;
right:15px;
left:15px;
这会将内部部分拉伸到任何宽度，它应该小于任一侧的 15px。
width:auto 应用于 input 字段的完整示例？
以下是来自 codeontrack.com 的建议，其中有很好的解决方案示例：
不要将 div 的宽度设置为 100%，而是将其设置为 auto，并确保
你可以尝试一些定位技巧。您可以将输入放在具有 position: relative 和固定高度的 div 中，然后在输入上有 position: absolute; left: 0; right: 0; 和您喜欢的任何填充。
活生生的例子
<input> 元素（idk about IE）。不过，它适用于 <div>。不，<input> 上的 display: block 也不起作用：-/
将输入框的填充移动到包装器元素。
<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>
<div class="outer">
<div class="inner">
<input/>
</div>
</div>
请参阅此处的示例：http://jsfiddle.net/L7wYD/1/
自从上次回答这个问题以来，也许浏览器已经发生了变化，但这是我唯一可靠地完成此任务的事情：
width: auto;
left: 0;
right: 0;
然后你可以做任何你想要的边距/填充，并且元素不会超过它的可用宽度。
这类似于@andology 的答案，但如果您将左/右都设为 0，那么您可以随意制作 margin 和/或 padding。所以这始终是我的默认 div。
只需了解 width:auto; 之间的区别即可。和宽度：100%；宽度：自动；将（自动）自动计算宽度，以适合包含填充的包装 div 的确切给定值。宽度 100% 扩展宽度并添加填充。
把它包在容器里怎么样。容器应该有如下风格：
{
width:100%;
border: 10px solid transparent;
}
尝试这个：
width: 100%;
box-sizing: border-box;
对我来说，使用 margin:15px;padding:10px 0 15px 23px;width:100%，结果是这样的：
https://i.stack.imgur.com/7RVie.png
我的解决方案是使用 width:auto 而不是 width:100%。我的新代码是：
margin:15px;padding:10px 0 15px 23px;width:auto。然后元素正确对齐：
https://i.stack.imgur.com/9d6fW.png
你可以这样做：
width: auto;
padding: 20px;
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。