我有一个html输入。
输入有填充:5px 10px;我希望它是100%的父div的宽度(这是流体)。
然而使用宽度:100%;导致输入为100% + 20px我怎么才能解决这个问题呢?
例子
我有一个html输入。
输入有填充:5px 10px;我希望它是100%的父div的宽度(这是流体)。
然而使用宽度:100%;导致输入为100% + 20px我怎么才能解决这个问题呢?
例子
当前回答
这就是为什么我们在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的解决方案,请查看其他答案。
其他回答
只需要理解width:auto;宽度:100%; 宽度:汽车;将(自动)matic计算宽度,以适应准确给定的包装div,包括填充。 Width 100%扩展宽度并添加填充。
试试这个:
width: 100%;
box-sizing: border-box;
假设我在一个15px填充的容器中,这是我总是用于内部部分的:
width:auto;
right:15px;
left:15px;
这将把内部部分拉伸到任何宽度,它应该小于15px两侧。
也使用百分比填充,并从宽度中删除:
padding: 5%; width: 90%;
你可以尝试一些定位技巧。你可以把输入放在一个具有position: relative和固定高度的div中,然后在输入上有position: absolute;左:0;右:0;,以及任何你喜欢的填充。
生活的例子