树谱图CSS实现技巧-优快云博客

本文详细介绍了一种利用纯CSS实现树谱图的方法，通过列表嵌套和伪类::before及::after，构造出清晰的树状结构。文章提供了完整的HTML和CSS代码示例，展示了如何创建具有美观折线连接的树形结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

树谱图的实现，是利用列表嵌套的原理，折线使用伪类::before及::after实现。

<div class="tree">
    <ul class="treeul">
        <li>
            <div class="dv">0</div>
            <ul>
                <li>
                    <div class="dv">1</div>
                    <ul>
                        <li>
                            <div class="dv">1-1</div>
                        </li>
                        <li>
                            <div class="dv">1-2</div>
                        </li>
                        <li>
                            <div class="dv">1-3</div>
                        </li>
                        <li>
                            <div class="dv">1-4</div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="dv">2</div>
                </li>
                <li>
                    <div class="dv">3</div>
                    <ul>
                        <li>
                            <div class="dv">3-1</div>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

*{margin: 0;padding: 0;}
ul,li{list-style: none;}
.dv{width: 90px;height: 145px;border: 1px solid #ccc;display: inline-block;font-size: 16px;position: relative;}
ul{overflow: hidden;padding-top: 20px;position: relative;}
li{float: left;text-align: center;position: relative;padding: 20px 5px 0 5px;font-size: 0;}
.tree li:only-child{padding: 0;}
.tree ul ul::before{content: "";position: absolute;left: 50%;top: 0;width: 0;height: 20px;border-left: 1px solid #ccc;}
li::before{content: "";position: absolute;right: 50%;top: 0;width: 50%;height: 20px;border-top: 1px solid #ccc;}
li::after{content: "";position: absolute;right: 50%;top: 0;width: 50%;height: 20px;border-top: 1px solid #ccc;}
li::after{left: 50%;top: 0;right: 0;
    border-left: 1px solid #ccc;
}
li:first-child::after{border-radius: 5px 0 0 0;}
.treeul li:first-child::before,.treeul li:last-child::after{border:none}
.treeul li:last-child::before{border-right:1px solid #ccc;border-radius: 0px 5px 0 0;}
.treeul li:only-child::before{border: none;}