我有一个html输入。
输入有填充:5px 10px;我希望它是100%的父div的宽度(这是流体)。
然而使用宽度:100%;导致输入为100% + 20px我怎么才能解决这个问题呢?
例子
当前回答
你可以不使用box-sizing和不明确的解决方案，如width~=99%。
演示jsFiddle:
保持输入的填充和边框 添加到输入负水平边距= border-width +水平填充 在输入的包装器中添加与上一步的边距相等的水平填充
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 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/
把这个复制到这里，因为我差点在另一个线程中漏掉了。
你可以尝试一些定位技巧。你可以把输入放在一个具有position: relative和固定高度的div中，然后在输入上有position: absolute;左:0;右:0;，以及任何你喜欢的填充。
生活的例子
试试这个:
width: 100%;
box-sizing: border-box;
以下是来自codeontrack.com的推荐，其中有很好的解决方案示例:
不要将div的宽度设置为100%，而是将其设置为auto，并确保<div>设置为display: block(默认为<div>)。
你可以不使用box-sizing和不明确的解决方案，如width~=99%。
演示jsFiddle:
保持输入的填充和边框 添加到输入负水平边距= border-width +水平填充 在输入的包装器中添加与上一步的边距相等的水平填充
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 */
}
