移动端多级缩进应使用 margin-inline-start + css 变量方案，通过 .menu-item--level-n 类配合 --indent-step 变量逐级计算缩进，兼顾 rtl/ltr、可维护性与兼容性；text-indent 和 attr() 在 calc() 中均不适用。
移动端多级缩进不能只靠 text-indent
text-indent 只作用于块级元素的首行，且对嵌套层级无感知——它无法区分“这是第几级菜单项”或“这个段落属于哪一层级结构”。你在 p 上写 text-indent: 2em，所有段落都一样缩进；在 .menu-item 上硬写 padding-left: 32px，二级、三级项根本不会自动叠加。更麻烦的是，text-indent 在 RTL（如阿拉伯语）下行为不可控，也不支持按层级动态计算。
用 margin-inline-start + CSS 变量实现可配置层级缩进
真正适配移动端多级结构的缩进，得把“层级”显式表达出来，再用 CSS 变量驱动计算：
- 给每个菜单项加明确层级 class，比如
.menu-item--level-1、.menu-item--level-2 - 在
:root定义基准缩进：--indent-step: 16px - 用
margin-inline-start替代padding-left，确保 LTR/RTL 下都缩进在内容起始侧 - 逐级声明，不依赖 DOM 深度：
.menu-item--level-1 { margin-inline-start: calc(var(--indent-step) * 0); }<br>.menu-item--level-2 { margin-inline-start: calc(var(--indent-step) * 1); }<br>.menu-item--level-3 { margin-inline-start: calc(var(--indent-step) * 2); }
这样改主题只需调一个变量，加新层级也只增一行 CSS，不用动 HTML 或 JS。
为什么别碰 attr(data-level) 在 calc() 里
看似优雅的 calc(var(--indent-step) * attr(data-level number, 1)) 实际几乎不可用：
- Chrome 115+ 才开始实验性支持，Safari 完全不认
- Firefox 对
attr()在calc()中的支持仍不稳定 - 一旦 fallback 失效，整层缩进归零，视觉结构直接崩塌
- 比手写 4 级 class 更重：需要 JS 注入
data-level，还要监听 DOM 变化
移动端首屏性能敏感，这种“理论可行但实操高危”的方案，不如老老实实用 class 编译层级。
伪元素缩进仅适用于无法改 HTML 的场景
当 CMS 输出扁平 li 列表、你又没法加 class 或属性时，可用 ::before 做视觉模拟：
- 用全角空格
- 配合
font-family: monospace进一步锁定宽度 - 别用
width: 16px; display: inline-block—— 行高不一致时会错位，尤其带图标或徽标时 - 注意：纯视觉缩进不影响屏幕阅读器，若用了
aria-level，必须同步更新data-indent值
这不是正解，是兜底手段。只要能改 HTML 或组件模板，优先走 class + 变量路线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
