必须用css变量+calc()重写缩进逻辑，因element ui硬编码padding-left导致层级失控；直接覆盖失效是因默认样式优先级高且嵌套复杂；应通过.el-menu--inline嵌套深度匹配层级并用margin-inline-start支持rtl。
Element UI 的多级菜单缩进无法通过 props 控制，硬编码的 padding-left 值（如 20px、48px）会随层级加深失控，改一处就得全局查漏补缺——必须用 CSS 变量 + calc() 重写缩进逻辑，否则主题切换、密度调整、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 } 很可能被覆盖或只作用于一级项。
- 实际 DOM 中，子菜单容器带
.el-menu--inline类，但其内部.el-menu-item并不自动继承父级缩进层级 - 默认计算不是严格线性（20px × level），二级是 48px（含图标预留空间），三级又不同，靠猜值 patch 不可持续
- 必须切断原有层级依赖，用显式 class 或属性标记“当前层级”，再绑定变量计算
用 :nth-of-type 模拟层级并配合 --menu-indent 变量
不依赖 JS 注入 data-level，也不碰不稳定的 attr(data-level)，而是利用 Element UI 渲染时子菜单在 DOM 中的相对位置——每个 .el-submenu 下的 .el-menu--inline 容器，就是下一级菜单的起点。
- 给最外层
<el-menu></el-menu>加 classmenu-root - 定义变量：
:root { --menu-indent: 16px; }（可被主题系统覆盖） - 逐级覆盖（示例到 4 级）：
.menu-root .el-menu-item, .menu-root .el-submenu__title { padding-left: calc(var(--menu-indent) * 0); } <p>.menu-root .el-menu--inline .el-menu-item, .menu-root .el-menu--inline .el-submenu__title { padding-left: calc(var(--menu-indent) * 1); }</p><p>.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(--menu-indent) * 2); }</p><p>.menu-root .el-menu--inline .el-menu--inline .el-menu--inline .el-menu-item, .menu-root .el-menu--inline .el-menu--inline .el-menu--inline .el-submenu__title { padding-left: calc(var(--menu-indent) * 3); }</p>
支持 RTL 时改用 margin-inline-start 而非 padding-left
当菜单需兼容阿拉伯语等右向语言时，padding-left 会把子菜单顶到右侧，结构错乱；margin-inline-start 自动适配书写方向，同一套 CSS 在 LTR/RTL 下都缩进在内容起始侧。
- 替换上面所有
padding-left为margin-inline-start即可，无需额外判断 - 注意：若需兼容 IE，得回退到
padding-left+direction: rtl，但必须加 wrapper class 隔离，避免污染全局 -
margin-inline-start在 Chrome 69+、Firefox 63+、Safari 12.1+ 均可用，现代项目基本无风险
缩进错位常因 overflow 或 transform 动画未同步触发重绘
点开子菜单时缩进突然跳变、子项对不齐，大概率不是 calc 写错了，而是容器高度变化时布局未稳定。
- 确保每个
.el-menu--inline容器有overflow: hidden，否则子项的calc()缩进会被溢出内容撑歪 - 如果用了
transform: scaleY(0)或max-height: 0做展开动画，必须同时给父容器加will-change: transform或contain: layout，强制触发重排 - 别用
margin-left实现缩进——Flex/Grid 容器可能截断它；padding-left或margin-inline-start更可靠
真正难的不是写出 calc(var(--x) * 2)，而是让每级缩进的“层级”在 DOM 和 CSS 中严格对齐；一旦用 class 显式标记层级，变量就只是个乘数，后面换 12px 还是 24px，改一行 --menu-indent 就全生效——但前提是，你得先确认那几个 .el-menu--inline 嵌套路径真能准确对应设计稿里的“第 N 级”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
