列表的嵌套使用

列表的嵌套使用

嵌套列表是HTML中常见的结构，用于展示层级关系的数据。通过<ul>、<ol>和<li>标签的组合，可以创建多级列表，适用于菜单、目录、步骤说明等场景。

基本语法结构

无序列表和有序列表都可以嵌套使用。嵌套时只需在<li>标签内部再放置一个新的列表结构：

<ul>
  <li>一级项目1
    <ul>
      <li>二级项目1</li>
      <li>二级项目2</li>
    </ul>
  </li>
  <li>一级项目2</li>
</ul>

有序列表的嵌套方式完全相同：

<ol>
  <li>第一步
    <ol>
      <li>子步骤1</li>
      <li>子步骤2</li>
    </ol>
  </li>
  <li>第二步</li>
</ol>

混合嵌套示例

实际开发中经常混合使用有序和无序列表：

<ol>
  <li>准备材料
    <ul>
      <li>面粉500g</li>
      <li>鸡蛋3个</li>
    </ul>
  </li>
  <li>搅拌材料</li>
</ol>

深度嵌套实践

理论上列表可以无限嵌套，但建议不超过4层以保证可读性：

<ul>
  <li>公司组织架构
    <ul>
      <li>技术部
        <ul>
          <li>前端组
            <ul>
              <li>UI小组</li>
              <li>交互小组</li>
            </ul>
          </li>
          <li>后端组</li>
        </ul>
      </li>
      <li>市场部</li>
    </ul>
  </li>
</ul>

CSS样式控制

嵌套列表默认会有缩进样式，可以通过CSS自定义：

<style>
  ul, ol {
    padding-left: 20px;
  }
  li {
    margin: 5px 0;
  }
  ul ul {
    list-style-type: circle;
  }
  ul ul ul {
    list-style-type: square;
  }
</style>

实际应用案例

网站导航菜单

<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li>产品
      <ul>
        <li><a href="/product/web">网站建设</a></li>
        <li><a href="/product/app">APP开发</a></li>
      </ul>
    </li>
    <li>服务</li>
  </ul>
</nav>

文档目录结构

<div class="toc">
  <ol>
    <li>第一章
      <ol>
        <li>1.1 概述</li>
        <li>1.2 基本概念</li>
      </ol>
    </li>
    <li>第二章</li>
  </ol>
</div>

注意事项

1. 每个<li>元素必须正确闭合
2. 避免在<ul>或<ol>内直接放置文本节点
3. 嵌套层级过深时考虑使用其他结构如<details>
4. 移动端显示时注意触摸目标大小

高级技巧

结合CSS计数器实现自定义编号：

<style>
  ol { counter-reset: section; }
  li { counter-increment: section; }
  li:before {
    content: counters(section,".") " ";
  }
</style>
<ol>
  <li>项目
    <ol>
      <li>子项目</li>
    </ol>
  </li>
</ol>

无障碍访问建议

1. 为导航列表添加aria-label属性
2. 复杂结构使用role="navigation"
3. 避免仅依赖视觉层次传达信息

<nav aria-label="主导航">
  <ul>
    <li><a href="/">首页</a></li>
    <li>
      <button aria-expanded="false">产品</button>
      <ul>
        <li><a href="/product/web">网站建设</a></li>
      </ul>
    </li>
  </ul>
</nav>