我有一个html输入。

输入有填充:5px 10px;我希望它是100%的父div的宽度(这是流体)。

然而使用宽度:100%;导致输入为100% + 20px我怎么才能解决这个问题呢?

例子


当前回答

你可以这样做:

width: auto;
padding: 20px;

其他回答

Box-sizing: border-box是一个快速,简单的方法来修复它:

这将适用于所有现代浏览器和IE8+。

这里是一个演示:http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

在现代浏览器中不需要浏览器前缀版本(-webkit-box-sizing等)。

也许浏览器在上次回答这个问题后已经发生了变化,但这是我唯一可靠地完成这个任务的方法:

    width: auto;
    left: 0;
    right: 0;

然后你可以随心所欲地设置边距/填充,元素不会扩展到超出其可用宽度的范围。

这类似于@andology的答案,但如果你把左/右都设为0,那么你可以设置你想要的空白和/或填充。这是我的默认div。

将输入框的填充移到包装器元素。

<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/

使用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/

把这个复制到这里,因为我差点在另一个线程中漏掉了。

也使用百分比填充,并从宽度中删除:

padding: 5%;
width: 90%;