这是现场演示
我试图将填充文本输入放在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%
由于某些未知原因,文字不在桌子上!