Html td 内 100% 宽度的文本输入在 td 外扩展/继续
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7525675/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text input with 100% width inside a td expands/continues outside the td
提问by Omu
Here is the live demo
这是现场演示
I'm trying to put a padded text input inside a td, and I want it to occupy 100% of the width, but it goes outside of the td. I don't understand why that happens, anybody knows?
我试图在 td 内放置一个填充文本输入，我希望它占据 100% 的宽度，但它超出了 td。我不明白为什么会这样，有人知道吗？
CSS
CSS
table{
border: solid 1px gray;
width: 90%;
}
input{ width: 100%; padding:10px; }
HTML
HTML
<table>
<tr>
<td style="width:150px;">Hello</td>
<td><input type='text' value='hihihih'/></td>
</tr>
</table>
回答by ShadowScripter
Explanation
解释
Here's a link to the W3C Box modelwhich explain in detail what happens to your element.
这是W3C Box 模型的链接，它详细解释了您的元素会发生什么。
- - - - -
- - - - -
All input elements have borders by default and may also have padding and margins, but most importantly, it follows the W3C box model specifications using the content-box.
默认情况下，所有输入元素都有边框，也可能有填充和边距，但最重要的是，它遵循 W3C 框模型规范，使用content-box.
This means that if you set the width to 100%, the actual size of the element will be greater than 100% when you include padding/borders, as shown in the images above.
这意味着如果您将宽度设置为 100%，当您包含填充/边框时，元素的实际大小将大于 100%，如上图所示。
Solution
解决方案
Add padding to the td to manually adjust the width of the input until it's where you want it to be. Remember that adding padding to the input means you have to add the same amount to the td to counteract the expansion.
将填充添加到 td 以手动调整输入的宽度，直到它达到您想要的位置。请记住，向输入添加填充意味着您必须向 td 添加相同的数量以抵消扩展。
Here's a live example
这是一个活生生的例子
input {
width: 100%;
padding: 10px;
margin: 0px;
}
table .last, td:last-child {
padding: 2px 24px 2px 0px;
}
Alternative solution
替代方案
You can also do the CSS3 version using box sizing(browser compatability).
This propertycan be used to switch between the two box models and will make it behave like you'd expect it to.
您还可以使用框大小（浏览器兼容性）来制作 CSS3 版本。
此属性可用于在两个盒子模型之间切换，并使其表现得像您期望的那样。
Here's a live example
这是一个活生生的例子
input {
width: 100%;
padding: 10px;
margin: 0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
Here are some possible duplicatesof the same question
以下是同一问题的一些可能重复项
回答by simoncereska
Simple. 100% width + padding, thats why. You should set padding for wrapper, not input
简单的。100% 宽度 + 填充，这就是为什么。您应该为包装器设置填充，而不是输入
回答by sandeep
you can use box-sizingproperty for this because paddingadd widthin your input field .
您可以box-sizing为此使用属性，因为在您的输入字段中padding添加width。
CSS:
CSS：
input {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
}
but it's not working IE7
但它不工作 IE7
回答by Jim Y
Easiest way is to set the padding as a percent of width, subtracted from 100%.
最简单的方法是将填充设置为宽度的百分比，从 100% 中减去。
So:
所以：
input {
width:96%;
padding:0 2%;
}
回答by Howard Cary Morris
I have found
我已经找到
<td><input type='text' value='hihihih'/>
works funny, try
工作有趣，试试
<td> <input type='text' value='hihihih'/>
it seems to work wonders Though to be truthful was using size= a number as opposed to width=100% for some unknown reason the text was outside the table!
它似乎创造了奇迹虽然说实话是使用 size= a number 而不是 width=100% 出于某种未知原因，文本在表格之外！
