我有一个html输入。
输入有填充:5px 10px;我希望它是100%的父div的宽度(这是流体)。
然而使用宽度:100%;导致输入为100% + 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/
把这个复制到这里，因为我差点在另一个线程中漏掉了。
其他回答
这就是为什么我们在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的解决方案，请查看其他答案。
也使用百分比填充，并从宽度中删除:
padding: 5%; width: 90%;
试试这个:
width: 100%;
box-sizing: border-box;
也许浏览器在上次回答这个问题后已经发生了变化，但这是我唯一可靠地完成这个任务的方法:
width: auto;
left: 0;
right: 0;
然后你可以随心所欲地设置边距/填充，元素不会扩展到超出其可用宽度的范围。
这类似于@andology的答案，但如果你把左/右都设为0，那么你可以设置你想要的空白和/或填充。这是我的默认div。
把它包在容器里怎么样?容器应该有这样的风格:
{
width:100%;
border: 10px solid transparent;
}
