只需要理解width:auto;宽度:100%; 宽度:汽车;将(自动)matic计算宽度，以适应准确给定的包装div，包括填充。 Width 100%扩展宽度并添加填充。

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

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

试试这个:

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

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

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

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

生活的例子

这就是为什么我们在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的解决方案，请查看其他答案。