必须用css变量+calc()重写缩进逻辑，因element ui硬编码padding-left导致层级失控；应通过.el-menu--inline嵌套深度匹配层级并用margin-inline-start支持rtl。
直接用 calc(var(--indent-step) * N) 替代硬编码 padding-left 值，是唯一能稳定控制多级缩进的方式；靠手写 20px、40px、60px 这类数值，改一级就崩三层，RTL 和主题切换根本没法做。
为什么直接覆盖 .el-menu-item 的 padding-left 总是失效
Element UI 默认样式中，.el-menu .el-menu--inline .el-menu-item 的 padding-left: 48px 是高优先级嵌套规则，单纯写 .el-menu-item { padding-left: 32px } 会被覆盖，且只作用于最外层项。更关键的是：它的缩进不是线性叠加（二级 ≠ 20px × 2），而是混入了图标预留空间等硬编码逻辑，靠“猜值” patch 不可持续。
- DOM 中子菜单容器带
.el-menu--inline，但内部项不自动携带“层级语义” - 你写的规则若没匹配到具体嵌套深度（比如漏掉三级的
.el-menu--inline .el-menu--inline），那对应层级就完全不受控 - 浏览器计算时会按选择器特异性（specificity）决定谁赢，不是“后写的一定生效”
怎样用 :root 变量 + 嵌套 class 精确绑定层级
核心是切断对 DOM 深度的隐式依赖，显式用 class 或结构特征表达“这是第几级”。推荐给最外层 <el-menu></el-menu> 加一个稳定 class（如 menu-root），再逐级匹配：
- 在
:root定义基准：:root { --indent-step: 16px; }（可被主题系统覆盖） - 一级项（含顶级
.el-submenu__title）：.menu-root .el-menu-item, .menu-root .el-submenu__title { padding-left: calc(var(--indent-step) * 0); } - 二级项：
.menu-root .el-menu--inline .el-menu-item, .menu-root .el-menu--inline .el-submenu__title { padding-left: calc(var(--indent-step) * 1); } - 三级项：
.menu-root .el-menu--inline .el-menu--inline .el-menu-item, .menu-root .el-menu--inline .el-menu--inline .el-submenu__title { padding-left: calc(var(--indent-step) * 2); }
这样每级缩进 = 16px × (层级 − 1)，干净、可预测、可主题化。
为什么必须用 margin-inline-start 而不是 padding-left
如果你的项目要支持阿拉伯语、希伯来语等 RTL 场景，padding-left 会让子菜单顶到右边，整个结构错乱；而 margin-inline-start 自动适配书写方向：LTR 下等效 margin-left，RTL 下等效 margin-right，同一套 CSS 在两种语言下都缩进在内容起始侧。
- 兼容性已足够：
margin-inline-start在 Chrome 69+、Firefox 63+、Safari 12.1+ 全部支持 - 别和
text-align: end混用——容易导致文字与缩进方向打架 - 若必须兼容 IE，则退回
padding-left+direction: rtl，但得额外加 class 控制（如.menu-rtl .el-menu-item） -
margin-left在 flex/grid 容器里容易被截断或忽略，不要用
attr(data-level) 在 calc() 里为什么基本不能用
很多人想写 padding-left: calc(var(--indent-step) * attr(data-level number, 1)) 实现自动推导，但实际中：attr() 在 calc() 内部的支持极差——Chrome 115+ 才开始实验性支持，Safari 完全不识别，Firefox 表现也不稳定。这不是写法问题，是浏览器实现缺失。
- JS 注入
data-level也不可靠：SSR、DOM 动态插入、服务端渲染都可能导致属性丢失或错位 - 真要动态生成层级语义，优先用
:nth-child或显式 class（如.menu-item--level-2），它们稳定、可预测、无需 JS - 如果菜单层级固定 ≤4 级，手写四组 class 规则比折腾
attr()更轻量、更健壮
真正容易被忽略的是：缩进变量必须和菜单容器的 overflow、box-sizing、以及 hover 展开动画的 max-height / transform 同步处理，否则 calc 出来的值会被溢出撑歪或动画卡顿——这比怎么写变量本身更常导致线上 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
