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

我同意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;
}

说明: 很明显,-14px的边缘 输入 form 元素。不那么明显的是 14px 来自。它等于 输入 加上默认的 元素的边框宽度(在我测试的所有浏览器上为2px)。所以2+5+5+2=14。

为了确保跨浏览器的一致性,需要显式地将边框宽度设置为所需的宽度 . 如果你想要一个不同的填充(或更厚/更薄的边框),那么只需重新计算。3px的填充是10px而不是14px,7px的填充是18px而不是14px。

例如,可以设置 #Container (也可能是 body 它本身(默认为页面宽度的100%)符合您的要求,并且上面的css应该与其宽度匹配。

如果你不使用 Reset CSS Stylesheet

width:auto 将为浏览器提供默认值。尝试 width:100%

td {
  padding: 0 1em;
}