在HTML中，如何使控件占用其容器的所有水平空间而不重叠边框？

时间：2012-08-21 15:30:53

标签： html css

考虑这个HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<table cellspacing = "10" cellpadding="0" border="1" width="100%">
<tr>
    <td>
        <input style="border-width:1px; border-style:solid; width:100%; background-color:aqua">
    </td>
</tr>
</table>
</html>

它输出以下内容，正如您所看到的，右侧有一些重叠。

Output in IE and Chrome

如何更改此代码，以便输入框占据TD的整个内部空间而不会重叠？

请注意，我正在寻找一个解决方案：

  • DOCTYPE标记和html标记如上所述。
  • 容器元素的大小不固定，如上所述。

谢谢。

1 个答案:

答案 0 :(得分：1)

添加box-sizing：输入标签的样式元素上的border-box解决了问题，如JamWaffles所述。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table cellspacing = "10" cellpadding="0" border="1" width="100%">
<tr>
    <td>
        <input style="box-sizing: border-box; border-width:1px; border-style:solid; width:100%; background-color:aqua">
    </td>
</tr>
</table>
</body>
</html>
相关问题
最新问题