如何使用5px填充的输入元素填充整个？

Question

我在<td>内有一个文本输入，其填充为5px;将宽度设置为100%时，它会超出<td> 10px的边界。有没有办法让它在不使用JavaScript的情况下填充整个<td>（即实际上它的宽度应该变为100% - 10px）？

提前致谢

Answer 1

我在2010年曾回答过这个问题，据我所知，当时没有合理的解决方案。

然而，由于CSS3，现在有两种解决方案：

使用box-sizing

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

使用calc

width: calc(100% - 10px);

某些浏览器可能需要供应商前缀（例如width: -moz-calc(100% - 10px);）。

Answer 2

检查为列指定的宽度。可能会导致问题。

Answer 3

如果您将其更改为display: block，则会展开以填充父级的宽度。

Answer 4

请参阅http://www.w3schools.com/css/css_boxmodel.asp

听起来好像不会起作用，因为css宽度只是内容而且填充是除了。

因此，如果您将内容指定为100％且填充为5px，则总计为100％+ 5px。

听起来好像你真的不需要在这种情况下填充，因为它是td中唯一的元素，所以我可能会考虑覆盖元素上的继承填充值，至少左边和右边如：

<input type="text" style="width:100%; padding-left:0px; padding-right:0px;"/>

另一种方法是使用较小的百分比，例如95％或90％。

Answer 5

上面的答案对我不起作用，下面的代码起作用：

<td style="position:relative;padding:0px;">
  <input style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;width:100%;outline:none;border:0px;" value="" />
</td>