对外层ul设display:flex会导致子列表缩进视觉消失，根本解法是仅对直接子li设flex、嵌套ul显式重置padding-left；用ul ul选择器而非li ul确保多层缩进生效，推荐em单位；回复按钮宜用::before伪元素实现，避免DOM冗余和对齐问题。
flex直接套在上会导致子列表缩进消失
给外层 ul 设 display: flex 后，所有子元素（包括嵌套的 ul）都会变成 flex item，浏览器 UA 默认的 padding-left 依然存在，但视觉上被父级 flex 的对齐和拉伸逻辑“压扁”了——你看到的是文字贴边、项目符号错位甚至消失，不是没缩进，而是缩进被覆盖或挤压。
根本解法是：不对外层 ul 整体设 flex，只对直接子项 li 做 flex 控制；嵌套的 ul 必须显式重置缩进，不能依赖默认值。
-
ul > li { display: flex; flex-direction: column; gap: 0.5rem; }—— 只影响第一层li，不穿透到子ul -
ul ul { padding-left: 1.5em; margin: 0; }—— 强制恢复每一层嵌套的缩进，避免继承父级 gap 或 margin - 如果用了
list-style-position: inside，flex 下 bullet 容易换行错位，优先用outside+ 调整padding-left
评论层级缩进要靠 ul ul 而不是 li ul
很多人写 li ul { padding-left: 1.5em; }，结果只生效于第一层嵌套，第二层及更深的缩进失效。这是因为 CSS 选择器匹配的是“li 直接包含的 ul”，而深层嵌套的 ul 是嵌在子 li 里的，不是当前 li 的直接子元素。
正确做法是用后代选择器 ul ul，它会命中所有嵌套层级的 ul，再配合 margin: 0 清除可能继承的上下边距干扰。
-
ul ul匹配任意深度的嵌套ul，比li ul或ul > ul更可靠 - 缩进值建议用
em单位（如1.5em），随字体缩放，比px更健壮 - 若需支持 IE11，
@supports not (display: flex)内必须回退为传统块布局，并显式写ul { padding-left: 2em; }
回复按钮和头像对齐别用额外标签，用 ::before
在 flex 的 li 里加一个 看似直观，但多一层 DOM 节点后，容易破坏 align-items 的 baseline 对齐，尤其当头像尺寸、文字行高不一致时，按钮会“飘”。
更干净的做法是用伪元素 ::before 插入图标或按钮，它属于 li 的渲染流一部分，不会新增布局上下文。
-
ul > li::before { content: "↩"; margin-right: 0.5rem; opacity: 0.7; }—— 简单回复指示 - 需要可点击按钮时，把
::before换成button并设position: absolute，但父li必须有position: relative - 头像统一用
flex-shrink: 0防止被压缩，文字区域用flex: 1自适应剩余空间
hover展开子评论时，gap 和 margin 容易引发闪退
纯 CSS 实现“点击展开子评论”时，如果子 ul 初始是 display: none，hover 或 focus-within 触发显示，常出现鼠标移过去瞬间菜单消失——这不是 JS 问题，而是布局缝隙导致的 hover 中断。
关键不是加 delay，而是让子 ul 和父 li 在视觉上“无缝衔接”：
- 子
ul的margin-top必须为0，且top: 100%（若用 absolute）或紧贴父li底部（若用 block） - 父
li不要设overflow: hidden，否则会裁剪掉展开的子列表 - 移动端无法依赖
:hover，:focus-within在部分 iOS 版本中不可靠，这类交互必须用轻量 JS 控制aria-expanded和 class 切换
嵌套层级越深，越容易忽略 ul ul 的重置必要性——它不像 Grid 那样自带嵌套隔离，flex 下每层 ul 都得手动“扶正”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
