1

我在 HTML 中使用嵌套表格和列表时遇到了极大的麻烦。我发誓我正在正确地构建 HTML 代码，使用 Sublime 帮助我确保所有标签和结束标签相互对齐，并使用适当的缩进来跟踪所有内容。但是，我的输出与我的预期相差甚远。我怀疑当您尝试将表格相互嵌套时可能会出现问题，尤其是当您尝试拥有一个包含无序列表的表格时。

以下是主要问题：

- 为无序列表设置正常的项目符号会使项目符号出现在随机区域，这是没有意义的。但是，即使在我的 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>

4

1 回答 1

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>

于 2015-07-11T09:04:20.597 回答