我有一个html输入。
输入有填充:5px 10px;我希望它是100%的父div的宽度(这是流体)。
然而使用宽度:100%;导致输入为100% + 20px我怎么才能解决这个问题呢?
例子
我有一个html输入。
输入有填充:5px 10px;我希望它是100%的父div的宽度(这是流体)。
然而使用宽度:100%;导致输入为100% + 20px我怎么才能解决这个问题呢?
例子
当前回答
也使用百分比填充,并从宽度中删除:
padding: 5%; width: 90%;
其他回答
你可以尝试一些定位技巧。你可以把输入放在一个具有position: relative和固定高度的div中,然后在输入上有position: absolute;左:0;右:0;,以及任何你喜欢的填充。
生活的例子
对我来说,使用margin:15px;padding:10px 0 15px 23px;width:100%,结果是这样的:
我的解决方案是使用width:auto代替width:100%。我的新代码是:
边距:15px;填充:10px 0 15px 23px;宽度:自动。然后元素正确对齐:
也使用百分比填充,并从宽度中删除:
padding: 5%; width: 90%;
假设我在一个15px填充的容器中,这是我总是用于内部部分的:
width:auto;
right:15px;
left:15px;
这将把内部部分拉伸到任何宽度,它应该小于15px两侧。
将输入框的填充移到包装器元素。
<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/