宽度:100%-padding？
Hai*_*ood 376 html css width fluid-layout
我有一个HTML输入.
输入padding: 5px 10px;我希望它是父div的宽度的100%(这是流动的).
然而,使用width: 100%;导致输入是100% + 20px如何绕过这个？
thi*_*dot 456
box-sizing: border-box 是一种快速,简便的方法来解决它:
这适用于所有现代浏览器和IE8 +.
这是一个演示:http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
-webkit-box-sizing现代浏览器中不需要浏览器前缀版本(等).
- @thirtydot是的,只是让它破坏IE7并让M $修复:) (8认同)
- 我不认为这是一个解决方案的坏处.通常,在额外div中包装元素是填充元素的好方法,而不会将元素的整体宽度推到其父容器之外. (5认同)
- 如果您需要它在 IE7 中工作，您可以阅读[此答案的旧版本](https://stackoverflow.com/revisions/5219611/2)。我真的为你感到难过。 (2认同)
Mat*_*ens 275
这就是我们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的解决方案,请查看其他答案.
- 这应该是默认行为..而不是+20到宽度.有时CSS似乎很严重搞砸了. (20认同)
- +1,但是http://caniuse.com/#search=box-sizing IE 8？此外,https://github.com/Schepp/box-sizing-polyfill似乎为IE 6-7提供了解决方案. (3认同)
- 这是什么样的巫术？答案为+1,上方评论为+1(这正是我所需要的). (3认同)
- 为了澄清IE上的盒子大小支持,对于IE盒子大小属性取决于IE文档模式,它适用于"IE8标准模式"及更高版本.因此,如果文档模式为"IE8标准模式",它也将在IE8浏览器版本中工作.希望这可以帮助. (2认同)
Vla*_*kov 27
你可以不使用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 */
}
- 这是一个很好的技巧,使用边距输入和填充包装器来补偿输入填充. (4认同)
Daa*_*aan 18
使用css calc()
超级简单而且棒极了.
input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}?
如下所示:Div宽度100%减去固定像素数量
通过webvitaly(/sf/users/49946641/)
原始来源:http://web-profile.com.ua/css/dev/css -width-100prc的减去100像素/
刚刚在这里复制了这个,因为我差点错过了另一个帖子.
小智 9
假设我在一个15px填充的容器中,这就是我一直用于内部部分:
width:auto;
right:15px;
left:15px;
这会将内部部分拉伸到任何宽度,应该小于15px两侧.
干杯
安迪
将输入框的填充移动到包装元素。
<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/
小智 5
这是codeontrack.com的建议，其中包含良好的解决方案示例：
而不是将div的宽度设置为100％，而是将其设置为auto，并确保将
<div>设置为display：block（默认为<div>）。
- 您不应该直接发布链接。您可以包括该链接中的信息。原因是，可能明天该链接将不可用，您的答案将不再有效。 (3认同)
也许自上次回答这个问题以来浏览器已经发生了变化，但这是我完成此任务唯一可靠的方法：
width: auto;
left: 0;
right: 0;
然后，您可以将边距/填充设置为您想要的任何内容，并且元素不会扩展超过其可用宽度。
这与 @andology 之前的答案类似，但如果你将左/右都设为 0，那么你可以制作margin和/或padding任何你想要的东西。所以这始终是我的默认div。