如何用纯CSS实现紧凑横向树形结构：子节点与父节点同水平？

解决方案代码 #

HTML结构

<ul class="tree">
  <li>Animals
    <ul>
      <li>Birds</li>
      <li>Mammals
        <ul>
          <li>Elephants
            <ul>
              <li>List item 1</li>
              <li>List item 2</li>
              <li>List item 3</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

SCSS样式

.tree {
  list-style: none;
  padding-left: 2em;
  
  li {
    position: relative;
    line-height: 1.5; // 统一行高保证对齐
    
    // 定位包含子列表的父节点，设置行内flex布局
    &:has(> ul > li:first-child) {
      display: inline-flex;
      align-items: center;
      gap: 0.5em;
      
      // 移除父节点的垂直先导线
      &:before {
        display: none;
      }
      
      // 定制第一个子节点样式
      & > ul > li:first-child {
        display: inline-flex;
        align-items: center;
        
        // 替换为水平连接符
        &:before {
          content: '-';
          position: static;
          border: none;
          margin-right: 0.5em;
        }
        
        // 移除第一个子节点的垂直后续线
        &:after {
          display: none;
        }
      }
    }
    
    // 树形连接线基础样式
    &:before,
    &:after {
      content: '';
      position: absolute;
      left: -1em;
      border-left: 1px solid #000;
    }
    
    &:before {
      top: 0.75em;
      height: 100%;
    }
    
    &:after {
      top: 1.5em;
      width: 0.5em;
      height: calc(100% - 1.5em);
    }
    
    // 最后一个子节点移除垂直后续线
    &:last-child:after {
      display: none;
    }
    
    ul {
      list-style: none;
      padding-left: 1em;
    }
  }
}

关键实现要点 #

1. 行内Flex布局：用inline-flex让父节点文本与第一个子节点在同一行，align-items: center保证垂直对齐，gap控制元素间距。
2. 连接线定制：
   • 移除父节点的垂直先导线，避免干扰水平连接效果。
   • 将第一个子节点的前置边框替换为水平连接符-，实现纯水平连接。
   • 移除第一个子节点的垂直后续线，后续子节点的连接线由自身伪元素处理。
3. 兼容性说明：:has()选择器需现代浏览器支持（Chrome 105+、Firefox 121+、Safari 15.4+），若需兼容旧浏览器，可给第一个子节点添加类名（如.first-child）替代:has()选择器逻辑。

内容的提问来源于stack exchange，提问作者PGlivi