宽度为100％的HTML输入文本框溢出表格单元格 [英] HTML input textbox with a width of 100% overflows table cells
本文介绍了宽度为100％的HTML输入文本框溢出表格单元格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有人知道为什么宽度为100％的输入元素会超过表格的单元格边界。
在下面的简单示例中，输入框会覆盖表格的单元格边界，结果是可怕的。这已经过测试，它的发生方式与Firefox，IE7和Safari相同。它对你有意义吗？
我错过了什么，你知道一个可能的解决方案吗？
<！DOCTYPE html PUBLIC - / / W3C // DTD HTML 4.01 Transitional // ENhttp://www.w3.org/TR/html4/loose.dtd\">
< html>< head>
< meta http-equiv =Content-Typecontent =text / html; charset = windows-1252> <！ - 不要在元标记中使用结束斜线，它会中断HTML4.01过渡 - >
< title>测试表格中的输入文字< / title>
< style type =text / css>
table {border-top：1px solid＃ff0000; border-left：1px solid＃ff0000;}
table td {border-right：1px solid＃00ff00; border-bottom：1px solid＃00ff00;}
input [type =text] {width：100％;} / *移除它将使输入不会越过单元格边界，但是它们太短，我希望它们适合单元格大小* /
< / style>
< / head>< body>
< table cellpadding =0cellspacing =0>
< tr>
< td>< p>第一列hello宝贝宝贝宝贝< / p>< / td>
< td>< p>两列hello宝贝更多< / p>< / td>
< td>< p>第三列hello宝贝越来越多< / p>< / td>
< / tr>
< tr>
< td>< input type =textvalue =test>< / td>
< td>< input type =textvalue =test>< / td>
< td>< input type =textvalue =test>< / td>
< / tr>
< / table>
< / body>< / html>
解决方案
您可以使用CSS3 box-sizing 属性包含外部填充和边框：
input [type =text ] {
width：100％;
box-sizing：border-box;
-webkit-box-sizing：border-box;
-moz-box-sizing：border-box;
}
Does anyone know why the input elements with a width of 100% go over the table's cells border.
In the simple example below input box go over the table's cells border, the result is horrible. This was tested and it happens in the same way on: Firefox, IE7 and Safari.
Does it make sense for you? Am I missing something, do you know about a possible solution?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional -->
<title>Test input text in table</title>
<style type="text/css">
table {border-top: 1px solid #ff0000; border-left: 1px solid #ff0000;}
table td {border-right: 1px solid #00ff00; border-bottom: 1px solid #00ff00;}
input[type="text"] {width: 100%;} /* removing this would make input not to go over cells border, but they would be too short, I want them to fit cells size */
</style>
</head><body>
<table cellpadding="0" cellspacing="0">
<tr>
<td><p>column one hello babe babe babe</p></td>
<td><p>column two hello babe more</p></td>
<td><p>column three hello babe more and more</p></td>
</tr>
<tr>
<td><input type="text" value="test"></td>
<td><input type="text" value="test"></td>
<td><input type="text" value="test"></td>
</tr>
</table>
</body></html>
解决方案
You could use the CSS3 box-sizing property to include the external padding and border:
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
这篇关于宽度为100％的HTML输入文本框溢出表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
