纯HTML+CSS无法可靠实现组织架构树，必须用JavaScript树图库（如d3-org-chart）；原因包括：无视觉连线、无法动态对齐、无状态管理、静态结构不可维护；妥协方案仅适用于极简固定场景。
纯 HTML + CSS 无法可靠布局组织架构树——这不是写法问题，而是能力缺失。所谓“HTML 管理系统”若真要呈现可用的组织架构树，必须引入 JavaScript 驱动的树图库，否则只能做出静态缩进列表，连基本连线、折叠状态同步、拖拽调岗都做不到。
为什么不能只靠
很多人误以为套个嵌套
- 节点之间没有视觉连线，上下级关系仅靠缩进暗示，打印或高对比度模式下几乎不可读
- 横向展开时，子节点无法自动居中对齐父节点（CSS Flex/Grid 无法跨层级计算动态位置）
- 点击折叠某部门后，其所有后代节点需同步隐藏，纯 CSS 无状态管理能力，
:has()兼容性差且不支持深度嵌套 - 当数据来自后端 JSON（含
id、parentId），HTML 结构必须动态生成，静态写死根本不可维护
d3-org-chart 是当前最轻量可靠的选型
它不依赖 jQuery，输入扁平数组即可自动构建树结构，连线用 SVG 贝塞尔曲线，折叠/展开自带过渡动画，且支持键盘导航和屏幕阅读器。比手写 CSS 定位 + position: absolute 稳定十倍。
- 数据格式只要满足：
[{id: 1, name: "CEO", parentId: null}, {id: 2, name: "CTO", parentId: 1}] - 初始化只需两行：
const chart = new OrgChart(document.getElementById("chart"), { data: orgData }); - 横向布局开箱即用，无需手动算 left/top；纵向布局也只需改一个配置项
orientation: "t2b" - IE11 不支持，但 2026 年绝大多数管理系统已可放弃兼容
如果硬要用纯 HTML/CSS 撑出“样子”，必须接受三大妥协
仅适用于固定 3–5 人、永不变更、不需导出、不需搜索的演示页面：
- 连线必须用
background-image或伪元素硬编码，换一个节点位置就断连 - 横向排列靠
display: flex+flex-direction: column堆叠，但子节点无法“挂”在父节点正下方中间，只能左对齐或右对齐 - 折叠功能只能靠 JS 切换
class控制display: none，CSS 本身无法响应数据变化 - 无障碍支持为零：没有
aria-expanded、role="tree"、role="treeitem"等必要语义属性
真正难的从来不是“怎么画框”，而是“怎么让框跟着人走”——某总监调去新部门，他的头像、职级、汇报线、下属列表、连线角度，全部得实时重算。这部分逻辑，没有 JS 就不存在。别在 CSS 里死磕布局，把精力留给数据绑定和状态管理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
