我有一个 html 输入。
输入有padding: 5px 10px;我希望它是父 div 宽度的 100%（这是流动的）。
但是使用width: 100%;导致输入是100% + 20px我如何解决这个问题？
问问题
276206 次
15 回答
582
box-sizing: border-box是一种快速、简单的修复方法：
这适用于所有现代浏览器和 IE8+。
这是一个演示：http: //jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
-webkit-box-sizing现代浏览器不需要浏览器前缀版本（等）。
于 2011-03-07T12:15:31.857 回答
286
这就是我们box-sizing在 CSS 中的原因。
我已经编辑了您的示例，现在它可以在 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 的解决方案，请查看其他答案。
于 2011-03-07T12:34:53.543 回答
43
也使用百分比填充并从宽度中删除：
填充：5%； 宽度：90%；
于 2011-03-07T12:00:55.200 回答
29
您可以在不使用box-sizing且不明确的解决方案（例如width~=99%.
- 保持输入
padding和border - 添加到输入负水平
margin=border-width+horizontal padding - 添加到输入的包装水平
padding等于margin上一步
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 */
}
于 2012-06-28T05:46:34.090 回答
25
使用 css 计算（）
超级简单和真棒。
input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}
如此处所示：Div 宽度 100% 减去固定数量的像素
由 webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
原始来源：http ://web-profile.com.ua/css/dev/css -width-100prc-minus-100px/
刚刚复制到这里，因为我在另一个线程中几乎错过了它。
于 2014-03-14T15:14:19.253 回答
12
假设我在一个有 15px 填充的容器中，这就是我一直使用的内部部分：
width:auto;
right:15px;
left:15px;
这会将内部部分拉伸到任何宽度，它应该小于任一侧的 15px。
于 2013-11-29T12:42:44.467 回答
6
你可以尝试一些定位技巧。您可以将输入放在一个具有position: relative固定高度的 div 中，然后在输入上设置有position: absolute; left: 0; right: 0;，以及您喜欢的任何填充。
活生生的例子
于 2011-03-07T11:58:13.130 回答
6
这是codeontrack.com的推荐，其中有很好的解决方案示例：
不要将 div 的宽度设置为 100%，而是将其设置为 auto，并确保
<div>设置为 display: block（默认为<div>）。
于 2015-09-21T12:04:39.730 回答
4
将输入框的填充移动到包装器元素。
<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/
于 2011-03-07T12:11:03.217 回答
3
自从上次回答这个问题以来，也许浏览器已经发生了变化，但这是我唯一可靠地完成此任务的事情：
width: auto;
left: 0;
right: 0;
然后你可以做任何你想要的边距/填充，并且元素不会超过它的可用宽度。
这类似于@andology 的答案，但如果你将左/右都设为 0，那么你可以制作margin和/或padding任何你想要的东西。所以这始终是我的默认设置div。
于 2021-04-07T12:23:41.273 回答
2
只需了解 width:auto; 之间的区别即可。和宽度：100%；宽度：自动；将（自动）自动计算宽度，以适合包含填充的包装 div 的确切给定值。宽度 100% 扩展宽度并添加填充。
于 2017-05-15T17:18:46.277 回答
0
把它包在容器里怎么样。容器应该有如下风格：
{
width:100%;
border: 10px solid transparent;
}
于 2015-08-21T13:31:38.963 回答
0
试试这个：
width: 100%;
box-sizing: border-box;
于 2015-12-03T15:55:39.347 回答
-1
对我来说，使用margin:15px;padding:10px 0 15px 23px;width:100%，结果是这样的：
我的解决方案是使用width:auto而不是width:100%. 我的新代码是：
margin:15px;padding:10px 0 15px 23px;width:auto. 然后元素正确对齐：
于 2019-10-14T22:02:52.640 回答
-9
你可以这样做：
width: auto;
padding: 20px;
于 2012-07-01T16:01:48.780 回答