真正整齐的列表根本在于HTML结构合规：ul只允许li、ul、ol为子元素，非法嵌套会被浏览器自动修复导致DOM异常；应避免div/p等块级元素直接插入ul，li内可用行内元素或article分组，横向排列时需清除list-style并用伪元素自定义标记，嵌套列表须用原生结构配合ul ul选择器缩进。
列表排版不整齐，根本原因不是CSS没写对，而是HTML结构本身就不合规——ul里塞div、li里包p、用空格或
<br>强行换行，这些都会让后续样式失控。
为什么ul和li不能随便嵌套其他块级标签
浏览器对ul的合法子元素有严格限制：只允许li（以及另一个ul或ol）。如果在ul里直接放div或p，HTML解析器会自动“修复”结构，把非法元素移到ul外面，导致DOM和预期不一致。
常见错误现象：
- 列表项突然错位或缩进异常
- 用DevTools检查发现
li被莫名包裹或拆开 - 屏幕阅读器跳过部分列表项（因结构被重排）
实操建议：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
li内部可直接放文本、span、a、img等行内元素；需要段落语义时，用<p></p>是允许的（HTML5已放宽） - 若需分组容器（如每项带图标+标题+描述），用
<div class="item-wrapper"></div>包在li内部，而不是放在ul里 - 避免用
<br>
或多个display: block或flex-direction: column
用display: flex横向排列li时必须关掉list-style
默认ul的圆点标记（bullet）在display: flex下容易错位、被裁切，甚至挤出容器。这不是bug，是list-style和flex盒模型不兼容的自然结果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一加
ul { list-style: none; padding-left: 0; }，彻底移除原生标记 - 如需自定义标记（如箭头、数字、图标），用
li::before伪元素，完全可控 - 别依赖
list-style-position: inside——它会让标记参与flex尺寸计算，导致flex-basis失效或换行异常 - 横向排列时，确保
li有明确宽度或min-width，否则内容长短不一易造成高度塌陷
响应式列表切换方向时，别只改flex-direction
移动端把横向导航收为垂直菜单，光靠@media (max-width: 768px) { flex-direction: column; }不够。真实场景中，垂直堆叠后常出现文字截断、点击热区太小、间距不协调等问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 垂直状态下加
align-items: flex-start，防止text-align: center导致长文本溢出 - 给
li > a设padding: 12px 16px，确保触摸目标≥44×44px - 用
gap统一控制项间距，比margin更可靠（注意IE不支持，需降级用margin） - 如果列表项含图标，垂直时考虑
flex-direction: row+align-items: center保持图标左对齐，避免上下居中后视觉失衡
嵌套列表的缩进不是靠margin-left硬调
多层嵌套的ul，靠CSS加margin-left: 20px模拟缩进，会导致语义丢失、打印样式错乱、辅助技术播报层级混乱。
正确做法是利用HTML原生嵌套结构，再用CSS微调：
- 子
ul必须作为li的**直接子元素**，不能包在div或p里 - 用
ul ul选择器统一控制子列表缩进，例如ul ul { margin-left: 1.5em; } - 禁用
ul ul li的list-style-type（如设为none），避免圆点层层叠加 - 若需不同层级用不同标记（如一级圆点、二级短横线），用
ul > li > ul { list-style-type: disc; }和ul ul { list-style-type: square; }分层设置
真正整齐的列表，从第一行HTML开始就该干净——结构对了，CSS才不会天天打补丁。
