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

假设我在一个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/

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

padding: 5%;
width: 90%;

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

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

你可以这样做:

width: auto;
padding: 20px;