原生<ul>嵌套是最稳方案，不依赖JS或第三方库；须用<li>包裹节点、子<ul>嵌入对应<li>内，缩进用margin-left+flex，连线用::before/::after绝对定位，禁用transform。

用原生 <ul> 嵌套是最稳的方案，不依赖 JS、不靠第三方库、打开即见结构——但很多人一上来就写平级 <div> 加 padding-left 模拟缩进，结果换字体或打印 PDF 就错位。

为什么不用 JavaScript 动态生成文件树

所谓“静态示意”，就是不联网、不执行 JS 也能看清结构。动态生成看似灵活，但实际有三处硬伤：

• walk() 递归深度大时容易栈溢出，尤其目录层级超 10 层后，Chrome 控制台直接报 RangeError: Maximum call stack size exceeded
• 导出 PDF（如 Chrome 打印）时，transform: scaleY(-1) 类翻转技巧失效，连线对不齐
• Safari 旧版本对 <details><summary> 的 open 属性响应不一致，折叠逻辑不可靠

<ul> 嵌套结构怎么写才不翻车

关键不是“能不能嵌套”，而是节点语义和缩进控制方式：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 每个文件夹/文件必须用 <li> 包裹，子目录塞进该 <li> 内部的 <ul>，不能跨级或漏层
• 缩进统一用 margin-left + display: flex 容器，别用 padding-left —— IE11 下 padding 计算异常会导致错位
• 图标必须用 ::before 伪元素，别塞 <img> 或 Unicode 字符（后者在等宽字体下易偏移）
• 区分类型靠 <span class="dir"> 和 <span class="file">，光靠颜色不够，用户扫一眼得立刻分清哪是 .html 哪是文件夹

CSS 连线怎么画才对齐不偏移

很多人用 border-left + border-bottom 拼“T”形，结果 Firefox 和 Chrome 渲染差 1px：

立即学习“前端免费学习笔记（深入）”；

• 垂直线用 ::before：设 position: absolute、left: -16px、top: 0、height: 100%、border-left: 1px solid #999
• 横线用 ::after：只加在每个 <li> 的最后一个子项上，content: ""、position: absolute、left: -16px、top: 50%、width: 16px、border-top: 1px solid #999
• 所有连线必须基于标准盒模型控制，禁用 transform 类属性，否则打印时消失

真正难的不是画出树，而是让每一级缩进、每一条连线、每一个图标，在不同浏览器、不同字体、不同导出场景下都保持稳定——这些细节一旦写错，改起来比重写还费劲。