推荐用 css 变量配合层级 class 控制 layui 菜单缩进：定义 --nav-indent-step，在 .layui-side .layui-nav-child dd 中用 calc() 计算缩进；收起时隐藏文字、居中图标；限定父容器提升特异性，避免 inline-block/float，rtl 用 margin-inline-start，动态菜单需补 data-level 属性。
用 CSS 变量 + 层级 class 精确控制缩进
layui 自身不提供缩进配置 API，二级菜单（.layui-nav-child 内的 dd）默认缩进靠父级 dl 的 padding 或内部元素的 margin 实现。硬写固定值如 padding-left: 30px 容易在多级嵌套或主题切换时失效。
推荐做法是定义 CSS 变量，并按结构层级匹配：
- 在
:root或侧边栏容器上声明缩进基准：--nav-indent-step: 16px; - 一级菜单项（无子菜单）保持默认左对齐，不加额外缩进
- 二级菜单项统一使用：
.layui-side .layui-nav-child dd { padding-left: calc(var(--nav-indent-step) * 1); } - 若需支持三级（如
.layui-nav-child .layui-nav-child dd），再叠加一层：padding-left: calc(var(--nav-indent-step) * 2);
收起状态下隐藏文字并居中图标
当侧边栏收缩为窄态（如 60px 宽），二级菜单文字必须隐藏，否则会溢出或错位；同时图标应水平居中显示。
- 给侧边栏添加收起类名，例如
layui-side-collapsed - 收起时强制二级项文字不可见：
.layui-side-collapsed .layui-nav-child dd span { display: none; } - 图标居中可配合：
.layui-side-collapsed .layui-nav-child dd a { text-align: center; padding: 0 10px; } - 确保
i.layui-icon没有浮动或外边距干扰，必要时重置：.layui-side-collapsed .layui-nav-child dd i { margin: 0 auto; }
避免常见缩进错乱问题
直接改 padding-left 常被覆盖，或导致 RTL 不兼容、hover 错位。关键要切断样式冲突链。
- 不要只写
.layui-nav-child dd，而应带上父容器限定范围，例如.layui-side .layui-nav-child dd，提高选择器特异性 - 禁用
display: inline-block或float做缩进——它们破坏 flex 布局流，且在收起/展开动画中易抖动 - RTL 场景下优先用
margin-inline-start替代padding-left，自动适配书写方向 - 若项目需兼容旧浏览器（如 IE），可用
direction: rtl+padding-right回退，但需额外 class 控制
动态生成菜单时的缩进同步处理
从接口拉取菜单数据并用 JS 渲染时，DOM 结构可能缺少层级语义，导致 CSS 缩进规则不生效。
- 渲染前为每级菜单容器添加
data-level="2"、data-level="3"等属性 - 对应写 CSS：
.layui-nav-child[data-level="2"] dd { padding-left: calc(var(--nav-indent-step) * 1); } - 调用
element.render('nav')后，再执行缩进类名注入或属性补全，避免被重置 - 不建议在
element.on('nav')回调里修改缩进样式——该回调仅响应点击，不是 DOM 就绪钩子
