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

我有一个html输入。

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

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

使用实例

297681 次浏览
小开

你可以尝试一些定位技巧。你可以把输入放在一个带有position: relative和固定高度的div中，然后在输入上有position: absolute; left: 0; right: 0;和任何你喜欢的填充。

现场示例 . .

小开

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

padding: 5%;
width: 90%;
小开

将输入框的填充移到包装器元素。

<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/

小开
最佳答案

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的解决方案，请查看其他答案。

小开

你可以不使用box-sizing和不清楚解决方案，如width~=99%。

< p > 演示在jsFiddle上: < br > enter image description here

  • 保持输入的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 */
}
小开

你可以这样做:

width: auto;
padding: 20px;
小开

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

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

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

小开

使用css calc()

超级简单，也非常棒。

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/

把这个复制到这里，因为我差点在另一个线程中漏掉了。

小开

把它包在容器里怎么样?容器应该有这样的风格:

{
width:100%;
border: 10px solid transparent;
}
小开

下面是来自codeontrack.com的建议，其中有很好的解决方案示例:

不要将div的宽度设置为100%，而是将其设置为auto，并确保<div>设置为display: block(默认为<div>)。

小开

试试这个:

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

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

enter image description here

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

margin:15px;padding:10px 0 15px 23px;width:auto。然后元素正确对齐:

enter image description here

小开

也许浏览器在上次回答这个问题后已经发生了变化，但这是我唯一可靠地完成这个任务的方法:

    width: auto;
left: 0;
right: 0;

然后你可以随心所欲地设置边距/填充，元素不会扩展到超出其可用宽度的范围。

这类似于@andology的答案，但如果你把左/右都设为0，那么你可以把margin和/或padding设为你想要的任何值。所以这总是我的默认div。


提交答案