统一用 padding-left 控制缩进并禁用 margin-left，用 counter-reset/counter-increment 实现多级连续编号，自定义符号优先用 background-image 或 inline svg，嵌套列表须语义明确并辅以 aria-label。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

ul 和 ol 嵌套时，缩进不一致怎么办 浏览器对 ul 和 ol 的默认 margin-left 和 padding-left 不同，嵌套时容易错位。比如 ol 里套 ul，第二层项目符号可能悬空或挤在一起。

• 统一用 padding-left 控制缩进，禁用 margin-left（尤其在重置样式时）
• 每层嵌套增加固定值，例如 2em，避免依赖浏览器默认行为
• 用 list-style-position: inside 可让文字对齐更可控，但注意它会让编号/符号进入内容区，需配合 text-indent 微调

多级列表中如何保持序号连续（如 1.1、1.2、2.1） HTML 原生 ol 不支持自动嵌套编号格式（如“1.1”），start 和 value 属性只能控制起始数字，无法联动父级。

• 纯 CSS 方案：用 counter-reset 和 counter-increment 配合 ::before 生成层级编号，父 ol 设 counter-reset: section，子 ol 设 counter-increment: subsection
• 关键点：counter-reset 必须写在父容器上（如 ol），不能只写在 li；否则每项都重置，编号全变成 1
• 若需导出为 PDF 或兼容 IE，此方案失效，得用 JS 动态写入 value 属性或改用表格模拟

用 CSS 自定义列表符号时，图片缩放和对齐总出问题 list-style-image 虽然简单，但图片尺寸、基线对齐、响应式缩放全不可控，常导致符号下沉或撑开行高。

• 改用 background-image + padding-left + background-position 替代，能精确控制大小（background-size）和垂直对齐（background-position: left center）
• 避免用 background-repeat: no-repeat 后忘记设 background-position，否则图片默认贴左顶对齐，视觉偏高
• 图标类符号优先用 inline SVG 而非 PNG，可直接内联、缩放不失真，且支持 fill 颜色动态修改

无障碍访问下，嵌套列表的语义和朗读顺序混乱 屏幕阅读器对多层 ul/ol 嵌套的处理差异大：有的跳过子列表，有的重复播报“list with 3 items”，有的把编号读成“one dot one”而非“one point one”。

• 确保每层 ol 或 ul 都有明确作用——不要只为缩进而嵌套，无意义嵌套会干扰 AT（辅助技术）解析
• 用 aria-label 显式标注层级意图，例如 <ol aria-label="步骤子项"></ol>，比单纯靠缩进更可靠
• 避免在 li 内混用标题（h3）、段落（p）和列表，这会让阅读器误判结构层次；如需混合内容，用 role="none" 或 aria-hidden="true" 隐藏装饰性列表节点

实际项目里，最常被忽略的是 counter 重置位置和 aria-label 的必要性——前者让编号断掉，后者让视障用户根本不知道这是个子列表。

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