我有一个html输入。
输入有填充:5px 10px;我希望它是100%的父div的宽度(这是流体)。
然而使用宽度:100%;导致输入为100% + 20px我怎么才能解决这个问题呢?
例子
当前回答
把它包在容器里怎么样?容器应该有这样的风格:
{
width:100%;
border: 10px solid transparent;
}
其他回答
只需要理解width:auto;宽度:100%; 宽度:汽车;将(自动)matic计算宽度，以适应准确给定的包装div，包括填充。 Width 100%扩展宽度并添加填充。
对我来说，使用margin:15px;padding:10px 0 15px 23px;width:100%，结果是这样的:
我的解决方案是使用width:auto代替width:100%。我的新代码是:
边距:15px;填充:10px 0 15px 23px;宽度:自动。然后元素正确对齐:
你可以这样做:
width: auto;
padding: 20px;
使用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/
把这个复制到这里，因为我差点在另一个线程中漏掉了。
以下是来自codeontrack.com的推荐，其中有很好的解决方案示例:
不要将div的宽度设置为100%，而是将其设置为auto，并确保<div>设置为display: block(默认为<div>)。
