对我来说，使用margin:15px;padding:10px 0 15px 23px;width:100%，结果是这样的:

我的解决方案是使用width:auto代替width:100%。我的新代码是:

边距:15px;填充:10px 0 15px 23px;宽度:自动。然后元素正确对齐:

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

不要将div的宽度设置为100%，而是将其设置为auto，并确保<div>设置为display: block(默认为<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/

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

padding: 5%;
width: 90%;

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

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

试试这个:

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