用css变量+calc()配合层级选择器替代硬编码padding-left，是可持续控制多级缩进的唯一方案；attr(data-level)因浏览器支持差不可用，应改用显式class或:nth-child推导层级，并优先使用margin-inline-start以兼容rtl。
直接用 CSS 变量 + calc() 替代硬编码 padding-left 值，是唯一可持续控制多级缩进的方式。靠手写 padding-left: 20px、padding-left: 40px 这类规则，改一级就崩三层，主题切换和 RTL 支持根本没法做。
为什么 attr(data-level) 在 calc() 里基本不能用
很多人想用 calc(var(--indent-step) * attr(data-level number, 1)) 实现自动计算，但实际中：Chrome 115+ 才开始实验性支持，Safari 完全不识别，Firefox 表现也不稳定。这不是写法问题，是浏览器实现缺失。
- 真实可用方案必须绕开
attr()，改用显式 class 或层级选择器 - 如果菜单层级固定 ≤4 级，直接写
.menu-item--level-2、.menu-item--level-3更轻量可靠 - 不要依赖 JS 注入
data-level——DOM 变动、SSR、服务端渲染都可能让属性丢失或错位
怎样用 :nth-child + 变量安全推导层级
Element UI 类框架中，子菜单容器（如 .el-menu--inline）在 DOM 中的位置相对稳定。可以利用这个特征，避免修改 HTML 结构：
- 给最外层
<el-menu></el-menu>加 classmenu-root - 定义变量：
:root { --indent-step: 16px; } - 逐级匹配（示例到三级）：
.menu-root .el-menu-item { padding-left: calc(var(--indent-step) * 0); }<br>.menu-root .el-menu--inline .el-menu-item { padding-left: calc(var(--indent-step) * 1); }<br>.menu-root .el-menu--inline .el-menu--inline .el-menu-item { padding-left: calc(var(--indent-step) * 2); } - 注意：这种写法只对 Element UI 有效；若用其他组件库（如 Ant Design），需换成对应类名，比如
.ant-menu-sub
margin-inline-start 比 padding-left 更值得优先考虑
如果你的项目要支持阿拉伯语、希伯来语等 RTL 场景，padding-left 会直接把子菜单顶到右边，结构全乱。而 margin-inline-start 自动适配书写方向，同一套样式在 LTR/RTL 下都缩进在内容起始侧。
- 兼容性已足够：Chrome 69+、Firefox 63+、Safari 12.1+ 全部支持
- 搭配
text-align: start更自然，避免文字对齐方向和缩进方向打架 - IE 不支持？那就退回
padding-left+direction: rtl，但必须额外加 class 控制，比如.menu-rtl .el-menu-item - 别用
margin-left——它在 flex/grid 容器里容易被截断或忽略
真正难的不是写出第一级缩进，而是当设计要求“二级缩进 16px、三级起改为 24px”时，你能否在 5 分钟内改完所有相关样式且不漏掉某处嵌套。这时候，变量命名是否清晰、层级选择器是否可预测、RTL 是否默认兼容，才暴露真实工程水位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
