td不允许自己扩展_关于html：td内部100％宽度的文本输入会在td外部扩展/继续

这是现场演示

我试图将填充文本输入放在td内，但我希望它占据宽度的100％，但是它超出了td。

我不明白为什么会这样，有人知道吗？

的CSS

table{

border: solid 1px gray;

width: 90%;

}

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

的HTML

Hello

说明

这是W3C Box模型的链接，详细说明了元素发生了什么。

-----

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

这意味着，如果将宽度设置为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％宽度的文本框超出其容器范围吗

输入类型="文本"和文本区域宽度的问题

100％宽度的div和表单元素+填充？

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

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

CSS：

input {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

padding: 10px;

}

但它不能正常工作IE7

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

所以：

input {

width:96%;

padding:0 2%;

}

我已经发现

作品有趣，尝试

它似乎在创造奇迹

虽然说实话是使用size =一个数字，而不是width = 100％

由于某些未知原因，文字不在桌子上！