在 HTML 中创建嵌套列表

Subodh Poudel 2023年2月19日 2022年1月2日
在 HTML 中创建嵌套列表

我们将介绍在 HTML 中创建嵌套列表的正确方法。

在 HTML 中创建嵌套列表

我们可以创建一个带有 ol 标签的有序列表和一个带有 ul 标签的无序列表。在这些标签中,我们使用 li 标签来创建项目列表。

有时我们必须在另一个项目列表中制作一个项目列表。这种列表结构称为嵌套列表,在本文中,我们将探讨编写嵌套列表的正确方法。

无序列表的结构如下。

<ul>
 <li> Item 1 </li>
 <li> Item 2 </li>
 <li> Item 3 </li> 
</ul> 

假设我们必须在 Item 1 下添加一些列表项。在这种情况下,我们应该在特定的 li 标签内使用 ul 标签。然后,我们可以使用 li 标签在 ul 标签内写入项目列表。

例如,创建一个 ul 标签,并在 ul 标签内创建三个 li 标签。在 li 标签内写入文本 DogsCatsHamsters,如下例所示。

在第一个 li 标签内,创建一个 ul 标签。在 ul 标签内创建两个 li 标签,并将列表项写为 Siberian HuskyGerman Shepherd

这是在 HTML 中编写嵌套列表的正确方法。

示例代码:

<ul>
 <li> Dogs 
 <ul>
 <li> Siberian Husky </li>
 <li> German Shepherd </li>
 </ul> 
 </li>
 
 <li> Cats </li>
 <li> Hamster </li> 
</ul> 

在创建嵌套列表时,我们应该避免在关闭 li 标签后编写嵌套的 ul 标签。这种做法不涉及任何嵌套列表。

编写嵌套列表的错误做法如下所示。

<ul>
 <li> Dogs </li>
 <ul>
 <li> Siberian Husky </li>
 <li> German Shepherd </li>
 </ul> 
 <li> Cats </li>
 <li> Hamsters </li> 
</ul> 

在编写子列表之前,我们已经关闭了 Dog 项目列表的 li 标签。然后,我们创建了一个 ul 标签来添加子列表。

尽管在上面的两个示例中结果看起来相同,但我们应该遵循第一种方法。我们应该确保 ul 标签是它所属的 li 标签的子标签。

因此,我们可以在 HTML 中正确地编写嵌套列表。

Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn