Question

我有一个用例，其中我是根据任意输入自动生成HTML的，可能会导致列表跳过某个级别，例如：

<!DOCTYPE html>
<html lang=en>

  <head>
    <title>Skipping a level in a list</title>
  </head>

  <body>
    <ul>
      <li>Valid HTML
        <ul>
          <li>
            <ul>
              <li>But displays an awkward extra marker</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Invalid HTML
        <ul>
          <ul>
            <li>But no extra marker, looks good</li>
          </ul>
        </ul>
      </li>
    </ul>
  </body>

</html>

如此处所述，我可以使用外观笨拙但有效的HTML或外观更好但无效的HTML。显然，我宁愿拥有美观且有效的HTML。

有什么我可以做的吗？请记住，我也想支持这样的结构：

- Lorem
    - Ipsum
  -Dolor

Answer 1

您可以使用CSS跳过第二级或其他级别。

根据您的用例，最好使用CSS类。

例如：

.item-level-not-visible{
    list-style-type: none;
}

ul ul{ /*skip second level*/
  list-style-type: none; 
}

ul ul ul{
  list-style-type: square;
}

<!DOCTYPE html>
<html lang=en>

  <head>
    <title>Skipping a level in a list</title>
  </head>

  <body>
    <ul>
      <li>Valid HTML
        <ul>
          <li>
            <ul>
              <li>But displays an awkward extra marker</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Invalid HTML
        <ul>
          <ul>
            <li>But no extra marker, looks good</li>
          </ul>
        </ul>
      </li>
    </ul>
  </body>

</html>

Answer 2

我知道的唯一方法是您使用的有效方法。您可以执行类似的操作，但是我不确定其他开发人员会首选哪种编写方法：

<ul>
    <li><ul>
         <li>List item</li>
     </ul></li>
</ul>

或

<ul>
    <li><ul><li>List item</li></ul></li>
</ul>

如何跳过HTML列表中的级别？

2 个答案: