td 内 100% 宽度的文本输入在 td 外扩展/继续答案

【问题标题】：Text input with 100% width inside a td expands/continues outside the tdtd 内 100% 宽度的文本输入在 td 外扩展/继续
【发布时间】：2011-11-23 10:49:10
【问题描述】：

这里是live demo

我正在尝试将填充文本输入放在 td 内，我希望它占据 100% 的宽度，但它超出了 td。我不明白为什么会这样，有人知道吗？

CSS

  table{
    border: solid 1px gray;
    width: 90%;
  }
  input{ width: 100%; padding:10px; }

HTML

<table>
  <tr>
    <td style="width:150px;">Hello</td>
    <td><input type='text' value='hihihih'/></td>
  </tr>
</table>

【问题讨论】：

标签： html css

【解决方案1】：

说明

这是W3C Box model 的链接，它详细解释了您的元素会发生什么。

- - - - -

默认情况下，所有输入元素都有边框，也可能有填充和边距，但最重要的是，它遵循使用content-box 的 W3C 框模型规范。

这意味着如果您将宽度设置为 100%，当您包含填充/边框时，元素的实际大小将大于 100%，如上图所示。

解决方案

向 td 添加填充以手动调整输入的宽度，直到达到您想要的位置。请记住，向输入添加填充意味着您必须向 td 添加相同的数量以抵消扩展。

这是live example

input {
    width: 100%;
    padding: 10px;
    margin: 0px;
}

table .last, td:last-child { 
    padding: 2px 24px 2px 0px; 
}

替代解决方案

您也可以使用box sizing (browser compatability) 来制作 CSS3 版本。
This property 可用于在两个盒子模型之间切换，并使其行为符合您的预期。

这是live example

input {
    width: 100%;
    padding: 10px;
    margin: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

以下是同一问题的一些可能重复

【讨论】：

【解决方案2】：

简单。 100% 宽度 + 填充，这就是原因。您应该为包装器设置填充，而不是输入

【讨论】：

【解决方案3】：

您可以为此使用box-sizing 属性，因为padding 在您的输入字段中添加width。

CSS：

input {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     box-sizing: border-box;
    padding: 10px;
}

但它在 IE7 中不起作用

【讨论】：

【解决方案4】：

最简单的方法是将填充设置为宽度的百分比，从 100% 中减去。

所以：

input { 
   width:96%;
   padding:0 2%; 
}

【讨论】：

【解决方案5】：

我找到了

<td><input type='text' value='hihihih'/>

很有趣，试试吧

<td>&nbsp;<input type='text' value='hihihih'/>

它似乎创造了奇迹虽然说实话是使用 size= 一个数字而不是 width=100% 由于某种未知原因，文本不在表格中！

【讨论】：