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

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

html css

在HTML中，如何使控件在不重叠边框的情况下占用其容器的所有水平空间？,html,css,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>

考虑以下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>

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

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

请注意，我正在寻找一种解决方案，其中：

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

谢谢。

添加框大小：输入标记的样式元素上的边框框解决了这个问题，正如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>

没有理由将其作为表格。HTML中缺少HEAD标记、BODY和FORM标记。这无助于解决问题。正如另一个人所说，这不应该在表中。请尝试

上的

框大小：边框框

。更多信息。如果没有头部或身体标签有关系吗？如果我加上头部和身体标签，似乎不会改变输出。叶，这很有效。。。谢谢你，华夫饼干。