Css 如何让带有填充的文本输入填充其容器

当然，块元素上的

width:100%

填充容器，但仅当边框、填充和边距为零时。将这样一个

输入

放在一个包含

div

的带填充的容器中就可以了，但我很好奇为什么简单的

input{display:block；width:auto；}

不起作用。建议？

如果我没记错的话，输入的默认大小不会跨越其容器的宽度。“width:auto；”类似于将样式“重置”回其默认值。

如果不使用，则浏览器将为输入元素设置一些默认样式，这可能包括填充和边距

---

另外，

width:auto

将为浏览器提供默认设置。尝试

width:100%

我同意centr0关于

width:auto

不起作用的原因

如果您确实希望将

输入

设置为其容器的全宽，那么下面的操作就可以了。鉴于：

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

解释：显然，

输入上的-14px边距

抵消了添加到

表单

元素的填充。不太明显的是

14px

从何而来。它等于

input

的左/右5px填充加上

input

元素边框宽度的默认值（在我测试的所有浏览器上为2px）。所以2+5+5+2=14

为了确保跨浏览器的一致性，您需要显式地将边框宽度设置为

输入所需的宽度。如果您想要不同的填充（或更厚/更薄的边框），那么只需重新计算即可。3px填充将是10px而不是14px，7px填充将是18px而不是14px

例如，您可以将
#Container
的宽度（也可以是默认为100%页面宽度的
正文
本身）设置为所需的宽度，并且上面的css应该与其宽度匹配。
重置容器的填充可以解决问题

td {
  padding: 0 1em;
}

提示这个问题的问题是，
width:100%
不允许使用边框或填充，因为它们会使其超过100%。我不知道这个问题到底是什么？似乎可以自己回答。填充、边距和边框使其超过100%，因为这就是工作原理。总宽度=宽度+边框+边距+填充
width:auto
不起作用，因为
width:auto
的意思不同。我认为
form>div.container>input
在大多数情况下在语义上更好。然而，这个解决方案似乎是最好的。
td {
  padding: 0 1em;
}