应显式设置ul ul的padding-left以修复flex下嵌套列表缩进失效问题，优先用margin-inline-start配合data-level属性选择器实现rtl安全缩进，避免对ul整体设display: flex导致子项错乱。

给子

显式设padding-left，别依赖浏览器默认值

Flex容器会让直接子元素（比如

）变成flex item，但子列表

本身仍是块级元素，它的UA默认padding-left在flex上下文中容易被忽略或挤压。你看到缩进消失、文字贴左、项目符号错位，往往不是没渲染
，而是它的padding-left视觉上“失效”了。

解决方法很简单：用ul ul选择器强制重置嵌套层级的缩进：

• ul ul { padding-left: 1.5em; } —— 必须写，不能省
• 避免用li { display: flex; }包裹整个节点，否则子
  会被当成flex item拉平
• 如果用了list-style-position: inside，bullets会挤进内容流，flex下易换行错位；优先用outside + 调整padding-left

用data-level + CSS属性选择器控制缩进深度

靠写.tree-node--level-2这类类名违背BEM原则，也难维护。真实项目里更稳的方式是让JS在渲染时给每个节点加data-level="2"，然后用CSS属性选择器精准控制：

• [data-level="0"] { margin-inline-start: 0; }
• [data-level="1"] { margin-inline-start: calc(var(--indent-step) * 1); }
• [data-level="2"] { margin-inline-start: calc(var(--indent-step) * 2); }

注意用margin-inline-start而非padding-left——它自动适配RTL语言，同一套规则在阿拉伯语界面下缩进仍在内容起始侧。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载

避免对ul整体设display: flex，只作用于直接子li

想用flex统一控制每项的垂直间距、hover对齐或图标布局，但又不想把嵌套

也拉成flex item，关键在选择器精度：
• ✅ 正确：ul > li { display: flex; flex-direction: column; gap: 0.75rem; } —— >确保不穿透到深层
• ❌ 错误：ul { display: flex; flex-direction: column; } —— 这会让所有子孙
  都变成flex item，缩进逻辑全崩
• 嵌套
  需单独重置：ul > li > ul { margin: 0; padding-left: 1.5em; }，防止继承父级gap或margin

IE11下必须降级，别指望autoprefixer修语义缺陷

IE11对display: flex在<ul></ul>上的支持极差，尤其嵌套时会丢list-style或错乱缩进。autoprefixer完全不处理这类渲染缺陷。

稳妥做法是用@supports做功能检测：

• 用@supports not (display: flex)包裹回退样式
• 里面写ul { padding-left: 2em; }和ul > li { margin-bottom: 0.75rem; }
• 绝对不要在IE11下对<ul></ul>设display: -ms-flexbox，实测它和list-style冲突更严重

真正复杂、多层且需IE11支持的树控件，得靠JS动态加class或补style——CSS方案在这里就是不可靠的。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！