Question

我正在尝试将填充的文本输入放在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>

Answer 1

<强>解释

以下是W3C Box model的链接，详细说明了您的元素会发生什么。

W3C box model - - - - - the two box models

默认情况下，所有输入元素都有边框，也可能有填充和边距，但最重要的是，它遵循使用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;
}

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

Answer 2

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

Answer 3

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

<强> CSS：

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

但它不适用于IE7

Answer 4

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

所以：

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

Answer 5

我找到了

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

很有趣，尝试

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

它似乎在创造奇迹虽然说实话是使用size =一个数字，而不是width = 100％由于某些未知原因，文字不在桌子上！

在td内部具有100％宽度的文本输入在td之外扩展/继续

5 个答案: