我在HTML中使用嵌套表和列表时遇到了令人难以置信的麻烦。我发誓我正在构建HTML代码，使用Sublime帮助我确保所有标签和结束标签相互排列并使用适当的缩进来跟踪所有内容。但是，我的输出是我所期望的FAR。 我怀疑当您尝试将表嵌套在彼此中时可能会出现问题，尤其是当您尝试使用包含无序列表的表时。
以下是主要问题：
- 无序列表的正常项目符号会使子弹出现在随机区域中，这没有任何意义。但是，即使在我的ul标签中添加style =“list-style-type：none”以便我甚至不必担心看到子弹，我仍然会看到每个列表项后面的子弹。名单。对于外部无序列表和内部无序列表，这都是一个问题。
- 您在最底部看到的第二组“href”和“Hosts”应位于“items”表中，因为两个表都在同一个表中。那么为什么它不在一切之内，包括在“物品”表之外呢？
是否有我遗失的标签？！
这是我的HTML代码，您可以在此处运行它以查看输出结果：
<!DOCTYPE html>
<html>
<body>
<table border="1">
<table border="1">
<tr>
<th>href</th>
<td>http://hello.com</td>
</tr>
<tr>
<th>items</th>
<td>
<table border="1">
<ul style="list-style-type:none">
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello1</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>
<table border="1">
<ul style="list-style-type:none">
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello1.1</td>
</tr>
<tr>
<th>Hosts1.1</th>
<td>
<table border="1">
<tr>
<th>myAge</th>
<td>400</td>
</tr>
<tr>
<th>favColor</th>
<td>Red</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello1.2</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>hello1.2</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
</ul>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello2</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>host value</td>
</table>
</td>
</tr>
</table>
</li>
</ul>
</table>
</td>
</tr>
</table>
</table>
</body>
</html>
这是一个更短的代码，仍然有相同的问题，但更容易阅读。请注意，第二个“href”和“Hosts”表不会被这个较短的代码推出“items”。
<!DOCTYPE html>
<html>
<body>
<table border="1">
<table border="1">
<tr>
<th>href</th>
<td>http://hello.com</td>
</tr>
<tr>
<th>items</th>
<td>
<table border="1">
<ul style="list-style-type:none">
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello1</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>host value</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
<li>
<table border="1">
<tr>
<th>href</th>
<td>hello2</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>host value</td>
</table>
</td>
</tr>
</table>
</li>
</ul>
</table>
</td>
</tr>
</table>
</table>
</body>
</html>
答案 0 :(得分：1)
您必须正确将内联css应用于li项目，请参阅下面的代码。为什么不尝试添加一个类然后将一些css应用到你的li项目并尝试重写你的代码它看起来像一个表格的金字塔，阅读上面的Cbroe评论。
将类添加到ul标记中，例如：
<ul class="mylist">
<li></li>
</ul>
<style type="text/css">
ul.mylist li {
list-style-type:none
}
</style>
<!DOCTYPE html>
<html>
<body>
<table border="1">
<table border="1">
<tr>
<th>href</th>
<td>http://hello.com</td>
</tr>
<tr>
<th>items</th>
<td>
<table border="1">
<ul class="mylist">
<li style="list-style-type:none">
<table border="1">
<tr>
<th>href</th>
<td>hello1</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>host value</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
<li style="list-style-type:none">
<table border="1">
<tr>
<th>href</th>
<td>hello2</td>
</tr>
<tr>
<th>Hosts</th>
<td>
<table border="1">
<tr>
<th>c_name</th>
<td>c_name value</td>
</tr>
<tr>
<th>host_name</th>
<td>host value</td>
</table>
</td>
</tr>
</table>
</li>
</ul>
</table>
</td>
</tr>
</table>
</table>
</body>
</html>