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

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模型的链接,详细说明了元素发生了什么.

- - - - -

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

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

解

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

这是一个实例

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

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

替代方案

您还可以使用框大小调整(浏览器兼容性)来执行CSS3版本.
此属性可用于在两个盒子模型之间切换,并使其行为与您期望的一样.

这是一个实例

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

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

• 我可以阻止100%宽度的文本框延伸到其容器之外
• 输入类型='text'和textarea宽度的问题
• 100%宽度div和表单元素+填充？

Answer 2

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