可借助HTML与CSS构建树形结构图，方法包括：一、嵌套无序列表配合缩进；二、Flexbox实现水平展开；三、Grid定义行列布局；四、SVG绘制路径连接；五、CSS变量动态计算缩进。
如果您希望在网页中以可视化方式呈现层级关系，例如组织架构、文件目录或分类体系，则需要借助HTML与CSS构建树形结构图。以下是实现此效果的多种方法：
一、使用嵌套无序列表与CSS缩进
该方法利用
- 和
- 的天然嵌套特性，配合CSS的margin-left或padding-left控制缩进层级，语义清晰且兼容性极佳。
1、创建根节点的
- 标签，并在其中添加第一个
- 作为顶层节点。
2、在需要子节点的
- 内部再次嵌套
- ，并在其内添加对应的
- 元素。
立即学习“前端免费学习笔记（深入）”；
3、为每个嵌套层级的
- 设置递增的左内边距，例如：ul ul { padding-left: 20px; }，ul ul ul { padding-left: 40px; }。
- 添加小图标（如▶或▼）通过::before伪元素实现，增强视觉识别度。
二、使用CSS Flexbox实现水平展开树
该方法适用于需横向延展、支持折叠/展开交互的树形图，通过flex-direction: row控制子节点排布方向，并结合visibility或max-height过渡动画实现收放效果。
1、将每个节点容器设为display: flex，并设置flex-direction: column用于垂直主干。
2、为子节点容器（即包含下级
- 的父
- ）添加position: relative，并在其后插入一个flex容器用于横向排列子项。
3、对子节点组应用display: flex与flex-wrap: wrap，设定固定宽度与justify-content: flex-start。
4、使用CSS类（如.is-collapsed）配合height: 0与overflow: hidden隐藏子树，再通过JavaScript切换类名触发显示。
三、使用CSS Grid定义行列式树布局
该方法适合节点数量可控、需精确对齐的静态树图，通过grid-template-rows/columns划分网格区域，将各层级节点定位到指定行列交点。
1、在外层容器上声明display: grid，并根据最大深度与宽度预设grid-template-columns，例如：grid-template-columns: repeat(5, 1fr)。
2、为每个节点元素设置grid-column和grid-row属性，例如根节点为1 / 1，其第一子节点为2 / 1，第二子节点为2 / 2。
3、使用grid-row-start和grid-column-start显式指定每个节点位置，避免依赖文档流。
4、用::after伪元素在父节点与子节点之间绘制连接线，通过绝对定位与border-bottom/border-left组合形成L型或T型连线。
四、使用SVG绘制带路径连接的树形图
该方法提供最高自由度的图形控制，适用于需要动态计算节点坐标、支持贝塞尔曲线连接线或响应式缩放的场景。
1、在外层包裹svg>标签，设定viewBox以支持缩放适配。
2、为每个节点使用
或 绘制图形，并通过cx/cy或x/y属性按层级偏移定位。 3、使用
或 连接父子节点，依据坐标差值生成折线路径，例如从(cx1,cy1)到(cx1,cy2)再到(cx2,cy2)。 4、将节点文字内容置于
标签中，设置dominant-baseline="middle"与text-anchor="middle"实现居中对齐。 五、使用CSS自定义属性与calc()动态计算缩进
该方法减少重复CSS规则，通过CSS变量统一管理缩进步长与层级计数，提升可维护性与响应式适应能力。
1、在:root中定义--tree-indent: 24px与--tree-level: 1。
2、为每个
- 设置--tree-level: calc(var(--tree-level) + 1)，需配合JavaScript或预处理器实现，纯CSS中需手动为每层设置data-level属性。
3、使用[data-level="2"] { padding-left: calc(var(--tree-indent) * 1); }，[data-level="3"] { padding-left: calc(var(--tree-indent) * 2); }。
4、关键信息提示：必须为每个层级的li元素添加data-level属性并手动赋值，纯CSS无法自动递增变量。
- ）添加position: relative，并在其后插入一个flex容器用于横向排列子项。
4、可选：为
- 添加小图标（如▶或▼）通过::before伪元素实现，增强视觉识别度。
- 元素。
- 作为顶层节点。
