效果图：
源码：（未做移动端自适应）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div class="tree-diagram"><ul><li class="tree-diagram_root"><p>海关数据</p><ul><li><p>海关数据类型</p><ul class="menu-list-ul"><li><p>海关申报数据</p></li><li><p>贸易提单数据</p></li><li><p>进口数据</p></li><li><p>出口数据</p></li><li><p>过境数据</p></li><li><p>海运数据</p></li><li><p>空运数据</p></li><li></li></ul></li><li><p>搜索方式</p><ul class="menu-list-ul"><li><p>产品</p></li><li><p>hs编码</p></li><li><p>小语种查询</p></li><li><p>进口商</p></li><li><p>出口商</p></li><li><p>提单号</p></li><li><p>口岸</p></li><li><p>时间</p></li><li><p>国别</p></li><li></li></ul></li><li><p>数据查询</p><ul class="menu-list-ul"><li><p>提关单记录</p></li><li><p>买家实时监控</p></li><li><p>同行实时监控</p></li><li><p>出口全球分析</p></li><li><p>进口商分析</p></li><li><p>出口商分析</p></li><li><p>产品分析</p></li><li><p>供应国分析</p></li><li><p>进口国分析</p></li><li></li></ul></li><li><p>开发工具</p><ul class="menu-list-ul"><li><p>公司概况</p></li><li><p>联系邮箱</p></li><li><p>领英联系</p></li><li><p>WhatsApp</p></li><li><p>进出口详情分析</p></li><li><p>展会记录</p></li><li><p>LBS地理信息</p></li><li><p>B2B店铺</p></li><li><p>社媒动态</p></li><li><p>社媒监控</p></li><li></li></ul></li><li><p>开发模式</p><ul class="menu-list-ul"><li><p>手动开发</p></li><li><p>半自动开发</p></li><li><p>全自动开发</p></li><li></li></ul></li><li><p>营销运营</p><ul class="menu-list-ul"><li><p>邮件营销</p></li><li><p>二次邮件营销</p></li><li><p>SOP邮件自动化运营</p></li><li><p>WhatsApp营销</p></li><li><p>facebook营销</p></li><li><p>CRM商机管理</p></li><li></li></ul></li></ul></li> </ul> </div></body> </html><style>*{margin: 0;padding: 0;}.tree-diagram{max-width: 1440px;margin: auto;}.tree-diagram ul {display: flex;position: relative;/* Reset ul 样式*/list-style-type: none;margin: 0;padding: 1rem 0.5rem 0rem 0.5rem;}.tree-diagram ul ul::before {border-right: 1px solid rgba(0, 0, 0, 1);content: '';/* Position */position: absolute;top: 0;right: 50%;/* Size */height: 1rem;width: 50%;}.tree-diagram li {display: flex; flex-direction: column;padding: 1rem 0.5rem 0rem 0.5rem;position: relative;/* Center the content */align-items: center;}.tree-diagram li::before {border-right: 1px solid rgba(0, 0, 0, 1);border-top: 1px solid rgba(0, 0, 0, 1);content: ''; /* Position */position: absolute;top: 0;right: 50%;/* Size */height: 1rem;/* height: 100%; */width: 50%;}.tree-diagram li::after {border-top: 1px solid rgba(0, 0, 0, 1);content: '';/* Position */position: absolute;top: 0;right: 0;/* Size */width: 50%;}.tree-diagram li:first-child::before, .tree-diagram li:last-child::after {/* Remove the top of border from the first and last items */border-top: none;}/* Add a root item if you want */li.tree-diagram_root{padding: 0;width: 100%;}li.tree-diagram_root::before {border-right: none;}.tree-diagram_root p{border: 1px solid #000000;padding: 5px;text-align: center;}.menu-list-ul{display: block !important;}.menu-list-ul li {transform: translateX(88px);display: block;text-align: center;}.menu-list-ul::before{border-right: 1px solid rgba(0, 0, 0, 1);content: '';position: absolute;top: 0;/* right: 80px !important; */right: 4.1666666vw !important;height: 1rem;width: 50%;}.menu-list-ul li::after{border-top: 1px solid rgba(0, 0, 0, 1);content: '';position: absolute;/* top: 32px; */top: 1.6666666vw;/* right: 135px; */right: 7.03125vw;width: 18%;}.menu-list-ul li::before {border-right: 1px solid rgba(0, 0, 0, 1);border-top: 0px solid rgba(0, 0, 0, 1);content: '';position: absolute;/* top: -32px; */top: -1.6666666vw;/* right: 160px; */right: 8.333333333vw;/* height: 4rem; */height: 100%;width: 50%;}.menu-list-ul p{/* width: 115px; */width: 6vw;}.menu-list-ul li:nth-child(1)::before{/* top: -16px !important; */top: -0.8333333vw !important;}@media (max-width: 768px) {} </style>