Question

当然，块元素上的width: 100%会填充容器，但前提是边框，填充和边距为零。将这样的input放入包含填充的div中可以解决问题，但我很好奇为什么简单地input {display: block; width: auto;}不起作用。建议？

Answer 1

我同意centr0为什么width: auto不起作用。

如果您确实希望input为其容器的全宽，则以下方法有效。给出：

<div id="Container">
    <form>
        <input type="text" />
    </form>
</div>

使用css执行此操作：

form {
    padding: 0 0 0 14px; 
    }

input {
    padding: 5px;
    width: 100%;
    margin: 0 0 0 -14px;
}

说明：显然，input上的-14px边距会抵消添加到form元素的填充。不那么明显的是14px的来源。它等于input的左/右5px填充加上input元素边框宽度的默认值（在我测试的所有浏览器上为2px）。所以2 + 5 + 5 + 2 = 14。

要确保您是一致的跨浏览器，您需要明确将边框宽度设置为input所需的宽度。如果你想要一个不同的填充（或更粗/更薄的边框），那么只需重做数学。 3px填充为10px而不是14px，7px填充为18px而不是14px。

对于该示例，您可以将#Container的宽度（也可以是body本身，只是默认为页面宽度的100％）设置为您想要的宽度，以及上面的CSS应该匹配它的宽度。

Answer 2

如果我没记错的话，输入的默认大小不会超过其容器的宽度。 “width：auto;”就像将“重置”样式恢复为默认值一样。

Answer 3

如果你没有使用Reset CSS Stylesheet，那么输入元素将具有浏览器设置的一些默认样式，这可能包括填充和边距。

另外，width:auto会给浏览器默认。试试width:100%

Answer 4

重置容器的填充可以解决问题。

td {
  padding: 0 1em;
}