纯CSS实现族谱树形结构：轻量无依赖的家谱展示方案

简介这是一份面向Web前端与PHP开发者的纯CSS族谱树形结构示例源码帮助快速理解如何利用display、position、float及伪类选择器实现多级父子节点的可视化展示并可直接迁移至企业组织架构、文件目录树等场景。压缩包体积仅约2KB共1个文件为1个可直接运行的HTML页面HTML内已预设示例数据打开即可查看节点层级、连接线及展开收拢效果。目前已有1270人浏览学习适合具备基础HTML/CSS知识、希望掌握树形布局实现思路的开发者参考。代码清晰展示了节点嵌套与连接线绘制逻辑支持无限级扩展的递归结构并留有良好的自定义空间可结合实际需求修改节点样式或接入JavaScript实现动态折叠、响应式适配等交互功能对前端布局进阶有较强的借鉴价值。1. 纯CSS族谱树形结构家族网站的轻量骨架方案接到某家族史资料整理项目时甲方要求把五代人的关系网做成网页树形结构。一开始想引入现成JS树组件后来发现需求极其朴素结构固定、无拖拽、无编辑只需要清晰展示“谁是谁的后代”。这份纯CSS族谱树形结构资源正好覆盖这种“静态展示型”家谱场景——它不需要JavaScript参与渲染用嵌套列表加伪元素画出竖线、横线与分支实现从根节点到末代子孙的完整树形视图。这套方案适合两类人一是要给文化类站点、家族档案页做展示的前端开发者二是在后台系统里需要轻量组织架构图、但不想引入重型组件的同学。它的核心价值就一句话用最小依赖解决家庭树的可读性问题改间距、改颜色、扩展到十几代都不需要动JS。2. 先说原理树形结构怎么用CSS“画”出来2.1 先定DOM骨架再谈样式CSS画树的难点不在样式而在DOM结构设计。如果结构不规范后续所有伪元素定位都会翻车。我推荐用嵌套列表ul li来组织层级而不是铺一堆div。原因有两点一是列表天然表达“父节点包含子节点”的语义二是li前面自带::before和::after两个伪元素刚好用来画连接线不需要额外添加空标签。这里给出一份最基础的结构约定div classtree ul li div classnode先祖/div ul li div classnode第二代长子/div /li li div classnode第二代次子/div /li /ul /li /ul /div先说逻辑.tree是画布容器负责限定整个树的坐标范围最外层ul只有一个li对应根节点先祖根节点的li内部第一层ul是“子节点列表”里面两个li分别对应两个儿子。这样嵌套下去每一层出现一个ul就代表又往下走了一代。参数上需要注意的是li必须作为ul的直接子元素中间不能穿插div包裹层。一旦插了:only-child这类兄弟选择器就会失效后面做独生子女样式排除时会踩坑。如果你是从后端模板渲染出来的HTML务必先检查这一层结构。2.2 垂直线的原理伪元素撑高度树形结构里最关键的线是“父节点到子节点列表”的垂直线。它连接的是父节点底部和子节点列表顶部横线。大多数实现里这根竖线挂在li的::before伪元素上.tree li { position: relative; padding-top: 24px; } .tree li::before { content: ; position: absolute; top: 0; left: 50%; width: 0; height: 100%; border-left: 2px solid var(--line-color, #999); }这段代码的逻辑是让li成为定位参照物::before贴紧li顶部从顶边一直画到底边。left: 50%让竖线落在节点水平中心width: 0配合border-left只显示竖线不出现色块。height: 100%则保证竖线跨越整个li的高度包括节点块本身和下方子列表区域。这里有一个关键点li的padding-top: 24px不是随便给的。它是“父节点底部到子节点列表顶部之间的间隙”也就是竖线的上半段露出的部分。取值太小父子两代挤在一起取值太大树被拉得稀疏。我一般取20px-30px具体数值你按页面密度调整。2.3 水平线的原理伪元素占宽度竖线画出来后子节点列表顶部需要一条横向连线把所有子节点的竖线串在一起。这个横线不能画在每个li上否则会出现“两根竖线之间各有一截线”的断裂感。正确做法是画在ul的::before上.tree ul { position: relative; } .tree ul::before { content: ; position: absolute; top: 0; left: 0; width: 100%; border-top: 2px solid var(--line-color, #999); }逻辑解释ul是子节点列表容器它的宽度天然包含所有子节点。横线从容器最左端画到最右端正好与每个子节点li::before的上端交汇形成标准的“T形”连接。视觉上父节点的竖线落在这条横线中点子节点的竖线从横线上垂直落下。这里必须注意ul的position: relative不能省。伪元素的绝对定位是相对于最近的定位祖先如果不给ul设置相对定位横线就会飘到外层容器上去。这个坑非常隐蔽因为单层结构下它看起来是对的一旦嵌套到三代以上横线位置就开始乱飘。2.4 为什么不用JS或SVG有人会问树形结构不是ECharts的强项吗为什么坚持纯CSS这里我对比了三种方案的实际成本方案渲染依赖文本自适应上手成本适用深度纯CSS无自动换行、自动撑高低静态展示、折叠交互SVGs需要计算坐标文本变宽要重算坐标高动态拖拽、缩放画布JSkills 树组件引入框架或脚本依赖组件API中高编辑、增删节点表格归纳出一个结论静态家谱的节点内容长度不定有的人名四个字有的人名带生卒年十几个字。CSS方案下文本自动换行节点块自动撑高所有连接线依托height: 100%和top: 0计算不需要任何JS介入。SVG方案则需要监听文本宽度变化手动更新每条线的坐标真实家谱数据里人名长短不齐维护成本反而高。3. 动手实现从空文件到完整族谱树3.1 搭建基础HTML结构我现在把一份完整可运行的最小实现写出来。这个HTML文件包含五代人由于代码库可运行的特性用缩进代表代际你先按这个名字结构测试再替换成自己的家谱数据。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title纯CSS族谱树示例/title link relstylesheet hreftree.css /head body div classtree ul classtree-list li classtree-item div classnode张氏始祖/div ul classtree-list li classtree-item div classnode二世·长子/div ul classtree-list li classtree-item div classnode三世·长孙/div /li li classtree-item div classnode三世·次孙/div /li /ul /li li classtree-item div classnode二世·次子/div ul classtree-list li classtree-item div classnode三世·三孙/div /li /ul /li /ul /li /ul /div /body /html这里的结构逻辑刚才第一部分已经解释过树中每出现一层ul就多一代。注意一个实际细节li里的神节点内容我用div包了一层没有直接用文本节点。原因在于稍后设置节点块背景、宽高和内边距时div比li本身更容易精确控制盒模型而且不会影响li伪元素画线。录入真实家谱数据时建议按“父节点 → 子节点列表”的顺序逐层填写。如果数据量特别大先拿三代测通样式再往下复制粘贴嵌套层避免一次性写很多层导致某个ul没有闭合。3.2 核心CSS垂直与水平连接线新建tree.css文件关键样式如下/* 基础重置去掉列表默认样式统一盒模型 */ body { font-family: Microsoft YaHei, PingFang SC, sans-serif; } .tree-list, .tree-list ul { list-style: none; margin: 0; padding: 0; } .tree-list ul { position: relative; display: flex; justify-content: center; padding-top: 32px; } /* 每条横线串起所有子节点的竖线 */ .tree-list ul::before { content: ; position: absolute; top: 0; left: 0; width: 100%; border-top: 2px solid #96a5b4; } /* 每个列表项画属于自己的竖线 */ .tree-list li { position: relative; padding: 32px 12px 0 12px; text-align: center; } /* 竖线从父节点底部延伸到横线 */ .tree-list li::before { content: ; position: absolute; top: 0; left: 50%; width: 0; height: 100%; border-left: 2px solid #96a5b4; } /* 节点块文字居中圆角背景色 */ .node { display: inline-block; min-width: 80px; padding: 8px 16px; background: #f7f9fc; border: 1px solid #c8d2e0; border-radius: 6px; font-size: 14px; line-height: 20px; position: relative; z-index: 1; }分块解释一下这段样式的设计逻辑。ul { display: flex; justify-content: center }让子节点列表横向排列且整体居中这是树形结构横向扩展的基础。li { padding: 32px 12px 0 }里的上下内边距要同时理解padding-top: 32px是给竖线顶部到节点块留出间距让父节点的竖线有一段“悬空”的引导段左右12px保证两兄弟节点之间有间隔不至于贴在一起。最关键的是.node { position: relative; z-index: 1 }。为什么要这个因为li::before的竖线默认覆盖在li中心线上而节点块如果没有z-index竖线会穿过文字视觉上像一把刀劈开人名。设置节点块为定位元素并抬高层级后竖线就被压在节点块下面只露出上下两端。这个顺序写反的话很多新手会困惑“线为什么从名字中间穿过去”。另一个需要说明的参数是边框线的颜色#96a5b4——灰蓝色调比纯黑柔和在暗色背景或打印场景下都舒服。你可以把颜色统一替换成自己的品牌色只改一处即可全局生效因为所有连接线都用的同一个值。3.3 多代际嵌套样式自动递推上面HTML结构中已经嵌套到了第三代。这个CSS还有一点很重要它对层数没有硬编码上限。因为每一层的ul、li用的都是同一个选择器新嵌套的层级自动匹配样式。你不需要为第四代、第五代单独写任何规则连接线会按要求逐层生成。不过当层级超过四代后会遇到一个宽度问题横向排列的子节点会占满整行而页面宽度有限。这时候有两种常见调节手段。一是减少左右内边距li { padding-left: 8px; padding-right: 8px }二是配合flex-wrap让超宽分支折行但在家谱语境下折行会破坏树形结构所以更推荐用横向滚动容器包裹整个.tree.tree { overflow-x: auto; padding: 20px; min-width: 800px; }注意这段代码里min-width是给整个树的参考宽度。当根节点下有十几个二代、三代子孙节点时树的实际宽度可能超过1200px设置min-width后窄屏设备横向滚动而不是压缩节点避免整棵树挤成一团。如果你确定页面宽度足够可以不设min-width让树自适应。3.4 参数统一管理用CSS变量控制全局风格树形结构做完后你大概率会面临多次颜值调整。与其每次全局替换颜色和间距不如把关键参数抽成CSS变量集中管理:root { --tree-line-color: #96a5b4; --tree-line-width: 2px; --tree-level-gap: 32px; --tree-node-gap: 12px; --tree-node-background: #f7f9fc; --tree-node-border: 1px solid #c8d2e0; }然后样式表里所有相关值全部替换变量引用.tree-list ul::before { border-top: var(--tree-line-width) solid var(--tree-line-color); } .tree-list li { padding: var(--tree-level-gap) var(--tree-node-gap) 0; }这样做的价值在于后续视觉评审提意见时你只需要改:root里的五行整个族谱树的所有连接线、间距、节点皮肤同时更新。我一般会把--tree-level-gap和--tree-node-gap作为重点调试对象前者控制代际垂直距离值越大树越“疏松”后者控制兄弟间距值越大树越“宽”。4. 避坑手册五个常见问题与解决记录4.1 子节点错位整棵树越往下越歪现象第二代节点水平居中对齐到第四代时某些分支明显偏左或偏右节点文字和竖线不在一条水平线上。原因li里的节点块高度不一致。比如有的人名加了生卒日期高度变成两行有的人名只有两字节点块比默认矮。li的高度由内容撑开而竖线是height: 100%不同高度的li导致各自的竖线起点和终点不一样整个树的“重心”就乱了。解决强制所有节点块统一高度同时保证文本垂直居中。具体做法是在.node上增加两行.node { height: 40px; line-height: 20px; display: inline-flex; align-items: center; justify-content: center; }这样不管内部文本几行节点块始终是40px高而且文字贴合中线。如果文本确实长到超过两行比如时代信息太长优先考虑截断或缩小字号而不是让节点块变高否则又会重新引入错位问题。4.2 竖线长出一截刺穿节点底部现象父节点竖线在节点块下方多延伸出一小段底端直顶子节点列表的横线视觉上多了一条“尾巴”。原因.tree-list li的padding-top本意是预留竖线间隙但li的盒子高度等于padding-top 内容高度。伪元素::before的高度设置为100%它包含了整个li的高度也就是从li的边框顶部一直画到底部。而节点块内容是相对定位压在上面只覆盖了内容区li底部的内边距区域实际上是空的竖线就在这个裸露区域露了出来。解决把竖线的起点和终点改到视觉期望的位置而不是依赖height: 100%盲目撑满。不过更省事的方案是去掉li的padding-top把间隙改到子列表ul上让竖线只在ul内部绘制.tree-list ul { padding-top: 20px; } .tree-list li { padding: 0 var(--tree-node-gap); }这样竖线从li顶部开始画而li顶部就是ul的padding-top区域刚好画出父节点下方的那段悬空指引。节点块依然压在线上不会出现尾巴。4.3 独生子女节点也有一条横线很突兀现象某个父节点只有一个子节点视觉上却是“一根竖线下来再接一根横线然后再一根竖线”多此一举。原因横线无条件画在ul::before上哪怕这个ul里只有一个li照样从左到右拉一条通栏线。解决用:only-child对独生子女的横线做排除/* 只有一个子节点时不画横线 */ .tree-list ul:has( li:only-child)::before { display: none; }:has()选择器的兼容性在现代浏览器中已经很稳定可以放心使用。如果你需要兼容老版本浏览器退而求其次的做法是给独生子女分支的ul加一个类.single然后写.tree-list ul.single::before { display: none }。两种方案逻辑一样但类名方案需要后端模板配合输出。4.4 页面里其他列表也被画上了连接线现象在同一张页面上除族谱树外还有其他普通列表比如网站侧边栏的目录这些列表的li前面也多出竖直装饰线样式串扰。原因选择器写得太宽泛。如果只写.tree-list li::before作用域是整个页面中所有带tree-list类名的元素。但某些主题或框架也会输出类似结构一旦类名撞车你的连接线样式就会被误应用。解决所有样式都挂在.tree这个总容器下面作为作用域收束.tree .tree-list li::before { /* 竖线样式 */ } .tree .tree-list ul::before { /* 横线样式 */ }这样做相当于给整个族谱树加了一层命名空间。从长期维护角度我建议族谱容器类名也用更独特的词比如.family-tree降低与第三方样式冲突的风险。4.5 浏览器缩放125%后连接线发虚或断裂现象Windows笔记本显示比例为125%或150%时1px或2px的竖线在屏幕上看起来发虚甚至像断成了两截。原因浏览器缩放时CSS像素和设备物理像素不是整倍数对齐细线落在半像素上渲染引擎只能通过插值模糊处理观感就差。边线在哪里都是如此2px的线在125%缩放下尤其明显因为2px÷1.251.6个物理像素无法整数对齐。解决把连接线宽度从2px调整到3px同时用transform: translateZ(0)触发硬件加速改善渲染平滑度。如果仍然发虚可以给连接线增加一层浅色阴影来“加粗”视觉重量.tree-list li::before { border-left: 3px solid var(--tree-line-color); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.8); }这算是一个偏门技巧但实测下来对高DPI屏幕的观感提升挺明显。有人问为什么不用background: linear-gradient画线那个方案在缩放时的表现比边框插值更糟糕边框方案已经是最优解。5. 结构扩展从线性家谱到真实族谱5.1 配偶节点的双人显示真实族谱里要展示“夫妻”家庭单元而不仅是单个人名。常见做法是节点块内部用横向排列的两个文本块表示“丈夫妻子”下方只挂一条children线代表两人共同的后代li classtree-item div classnode node-couple span classspouse张氏始祖/span span classspouse-divider配/span span classspouse李氏/span /div ul classtree-list li classtree-item.../li /ul /li配套CSS是给.node-couple增加一个两栏布局.node-couple { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; } .spouse-divider { color: var(--tree-line-color); font-size: 12px; margin: 0 2px; }这里不需要再添加任何连接线。因为竖线的定位逻辑基于li而li的中心点在夫妻块整体中点附近竖线会自动从夫妻块中间位置垂下。如果想让竖线从丈夫名下方引出传统家谱的习惯可以给li::before的left改成一个偏移百分比比如left: 38%具体数值需要根据两个名字的实际宽度调整——这是调试时最费时间的一步建议用后面第六部分的基线对齐法。5.2 折叠分支checkbox hack无JS实现家谱大了以后页面太宽。给每个分支加一个折叠按钮是很自然的诉求。这里用纯CSS方案不引入任何脚本li classtree-item input typecheckbox idtoggle-01 classtoggle-input checked label fortoggle-01 classtoggle-label收起/展开/label div classnode某祖先/div ul classtree-list ... /ul /li.toggle-input { position: absolute; opacity: 0; pointer-events: none; } .toggle-label { cursor: pointer; font-size: 12px; color: var(--tree-line-color); user-select: none; } /* 未勾选时隐藏整个子列表 */ .toggle-input:not(:checked) ~ .tree-list { display: none; }逻辑解析:not(:checked)是复选框未被选中时的状态~是后续兄弟选择器匹配同级的.tree-list。勾选时显示取消勾选时隐藏。把复选框透明化后视觉上只剩一个可点击的label文本“收起/展开”。这套方案启动成本为零不需要初始化任何JS事件缺点是label的位置和点击区域比较小移动端上误触概率高建议给label加padding: 6px 10px扩大热区。5.3 从JSON批量渲染数据驱动生成真实数据通常存在数据库或Excel里不太可能手写几十层嵌套HTML。常见做法是先用脚本把数据转成JSON再用模板函数一次性渲染出上面的嵌套结构。这里给一个最精简的渲染函数function renderTree(data) { const createItem (node) { const li document.createElement(li); li.className tree-item; const div document.createElement(div); div.className node; div.textContent node.name; li.appendChild(div); if (node.children node.children.length 0) { const ul document.createElement(ul); ul.className tree-list; node.children.forEach((child) { ul.appendChild(createItem(child)); }); li.appendChild(ul); } return li; }; const root document.createElement(ul); root.className tree-list; root.appendChild(createItem(data)); return root; }这个函数的逻辑是递归遇到节点先创建一个li塞入节点块div如果该节点带children数组就再创建ul继续递归挂进去。渲染完成后CSS完全不用改数据和样式实现了彻底分离。接到真实家谱项目时数据清理花的时间通常比渲染多重点检查三件事配偶合并成单个节点、分支空数组处理、节点姓名是否包含HTML特殊字符如引号、符号需要做转义。6. 验证与微调技巧6.1 用浏览器设备工具栏快速压测族谱树布局完成之后别急着提交。用Chrome的开发者工具切换到设备模拟模式快捷键CtrlShiftM分别压测320px、768px和1280px三个宽度档位。看三件事横线是否溢出视口、节点是否横向堆叠成两行、竖线是否在容器边界被切断。如果树超过容器宽度给.tree包一个overflow-x: auto的父容器并设定最小宽度避免过度压缩。6.2 基线对齐调试法连接线错位很难直接看出来我习惯临时给每个节点块加一个红色调试边框再在父节点和子节点之间画一根临时横线作为参考.debug .node { outline: 1px solid red; } .debug .tree-list li::after { content: ; position: absolute; top: 12px; left: 0; width: 100%; border-top: 1px dashed red; }把红色参考线定位在竖线应该出现的位置然后逐一检查每个li的::before是否与参考线重合。对不齐的检查其position: relative是否被祖先元素的position覆盖以及行高是否一致。确认无误后把.debug类从容器上移除即可。6.3 保留一个微调习惯字体与行高校验中文字体在Windows和macOS下渲染行高差异很大——用微软雅黑和用苹方同样font-size: 14px的实际行高可能差2px到3px。这会导致竖直对齐在不同系统下偏移。我每次交付前都会强制做三件事检查所有.node的line-height是否统一用font-family显式声明回退字体不依赖系统默认字体然后浏览器缩放125%跑一遍视觉走查确认无线条发虚。从那以后我写的每个族谱树项目都强制走一遍这个流程几乎很少收到“线对不齐”的反馈。希望这些踩坑经验帮到你让你一次就能把纯CSS族谱树做稳妥。本文还有配套的精品资源点击获取