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

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

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

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

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

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

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

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

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

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

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

假设我在一个15px填充的容器中，这是我总是用于内部部分的:

width:auto;
right:15px;
left:15px;

这将把内部部分拉伸到任何宽度，它应该小于15px两侧。

你可以不使用box-sizing和不明确的解决方案，如width~=99%。

演示jsFiddle:

保持输入的填充和边框 添加到输入负水平边距= border-width +水平填充 在输入的包装器中添加与上一步的边距相等的水平填充

HTML标记:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}