必须用css变量+calc()重写缩进逻辑，因element ui硬编码padding-left导致层级失控；应通过.el-menu--inline嵌套深度匹配层级并用margin-inline-start支持rtl。
直接用 padding-left 硬编码缩进值（比如 48px、68px）在 Element UI 中必然失控——它不是线性叠加，而是混入图标预留空间的近似值，改一级就崩三层，主题和 RTL 支持根本没法做。必须用 CSS 变量 + calc() 重写缩进逻辑。
为什么 .el-menu-item { padding-left: 32px } 总是不生效
Element UI 默认规则是 .el-menu .el-menu--inline .el-menu-item { padding-left: 48px }，选择器特异性远高于你写的单类名规则；更关键的是，二级、三级项根本不匹配 .el-menu-item 这个选择器——它们被包裹在多层 .el-menu--inline 容器里，DOM 深度 ≠ 样式层级语义。
- 不要靠
!important强行覆盖：后续主题覆盖、组件升级会越来越难维护 - 别写
.el-menu--inline .el-menu--inline .el-menu-item这种嵌套选择器去“猜深度”：Element UI 渲染时子菜单容器虽带.el-menu--inline，但内部项不自动继承层级含义 - 真正有效的做法是给最外层
<el-menu></el-menu>加一个稳定 class（如menu-root），显式绑定层级
如何用 :root 变量 + 嵌套 class 精确控制每级缩进
核心是把缩进变成可预测的数学关系：缩进 = --indent-step × (层级 − 1)，而不是靠试数值 patch。
- 在
: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); }
为什么优先用 margin-inline-start 而不是 padding-left
如果你的项目要支持阿拉伯语、希伯来语等 RTL 场景，padding-left 会让子菜单顶到右边，整个结构错乱；而 margin-inline-start 自动适配书写方向：LTR 下等效 margin-left，RTL 下等效 margin-right。
- 兼容性已足够：Chrome 69+、Firefox 63+、Safari 12.1+ 全部原生支持
- 别用
margin-left—— 它在 flex/grid 容器里容易被截断或忽略 - 搭配
text-align: start更自然，避免文字对齐方向和缩进方向打架 - 若必须兼容 IE，退回
padding-left+direction: rtl，但得额外加 class 控制（如.menu-rtl .el-menu-item）
为什么不能用 attr(data-level) 在 calc() 里动态计算
看着很理想：padding-left: calc(var(--indent-step) * (attr(data-level number, 1) - 1))，但实际中几乎不可用。
- Chrome 115+ 才开始实验性支持，Safari 完全不识别，Firefox 表现也不稳定
- JS 注入
data-level在 SSR、服务端渲染或 DOM 变动时容易丢失或错位 - 稳妥做法是把层级“编译”进 class 名（如
.menu-item--level-2），或用显式.menu-root+ 嵌套 class 匹配
真正容易被忽略的是：缩进只是表象，背后是层级语义的显式表达。靠 DOM 深度推导（比如 .el-menu--inline .el-menu--inline 套几层）本质仍是隐式依赖，一旦组件库版本升级或渲染逻辑微调，样式就失效。必须用 class 或属性把“这是第几级”这件事明确定义出来，变量才真正可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
