我有一个html输入。

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

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

例子


当前回答

你可以这样做:

width: auto;
padding: 20px;

其他回答

你可以尝试一些定位技巧。你可以把输入放在一个具有position: relative和固定高度的div中,然后在输入上有position: absolute;左:0;右:0;,以及任何你喜欢的填充。

生活的例子

以下是来自codeontrack.com的推荐,其中有很好的解决方案示例:

不要将div的宽度设置为100%,而是将其设置为auto,并确保<div>设置为display: block(默认为<div>)。

试试这个:

width: 100%;
box-sizing: border-box;

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

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

把它包在容器里怎么样?容器应该有这样的风格:

{
    width:100%;
    border: 10px solid transparent;
}