合法的列表嵌套结构要求子ul或ol必须作为li的直接子元素，否则浏览器会将其修正为同级列表，导致语义丢失、样式错乱及可访问性问题；ul与ol可混用，但需基于内容语义；嵌套层级无硬性限制，但建议不超过三层。

什么是合法的列表嵌套结构 HTML 中只有 ul、ol 和 li 可以参与嵌套，且必须遵循“li 包裹子列表”的规则。直接把 ul 或 ol 放在另一个 ul 或 ol 里是无效的，浏览器会自动修正（比如把子列表提到同级），导致样式错乱或语义丢失。

• 子列表必须作为某个 li 的直接子元素
• ul 里可以嵌 ol，反之亦然，没有类型限制
• 嵌套层级没有硬性上限，但超过 3 层易影响可访问性和维护性

怎么写一个带二级菜单的 ul 嵌套 常见场景是导航菜单或分类目录。关键不是“能不能嵌”，而是“在哪嵌”——必须嵌在 li 内部，而不是 ul 下直接写 ul。

• 首页
• 产品
  • Web 服务
  • API 工具
• 关于

注意：第二层 ul 是缩进写在 <li>产品</li> 的结束标签前，不是另起一行空着放——虽然 HTML 解析器能容错，但这种写法容易漏掉闭合标签，也影响 CSS 选择器精准定位（比如 li > ul）。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

ol 和 ul 混用时的序号继承问题ol 嵌套时，默认序号不会延续父级，而是每个 ol 独立从 1 开始。如果需要 A.1、A.2 这类多级编号，纯 HTML 不支持，得靠 CSS counter-reset 和 counter-increment 控制。

• 浏览器原生只识别单层 ol 的 type 属性（如 type="a"）
• ol type="1" 和 ol type="a" 在嵌套中互不影响
• 若用 start 属性手动设起始值，需同步计算上层偏移，极易出错，不建议用于动态内容

容易被忽略的 CSS 重置和缩进控制 默认情况下，嵌套列表的左边距由浏览器 UA 样式决定，各浏览器差异大（Chrome 用 padding-inline-start，Firefox 用 margin-left）。如果不统一重置，会出现缩进不齐、文字换行错位等问题。

• 推荐对所有 ul、ol 显式设置 padding-left: 0 或 margin-left: 0
• 用 li 的 padding-left 或伪元素 ::marker 控制缩进，更可控
• 避免依赖 list-style-position: inside，它会让文本换行后对不齐，尤其在多行列表项中

嵌套本身很简单，难的是让每一层都响应正确、缩进一致、语义清晰——特别是当列表要配合 JS 动态展开/收起时，DOM 结构一旦写错，后续脚本就很难可靠判断层级关系。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！