如何用纯CSS将嵌套<ul>渲染为带连接线的层级树状结构？

嘿，你的思路完全没问题，用嵌套<ul>/<li>来做这种树状结构在语义上非常合适！我看了你当前的CSS，问题主要出在伪元素的位置和尺寸计算上，导致线条没法完美对齐。咱们来调整一下，让它完全复刻你想要的命令行树样式：

完整实现代码 #

HTML结构（保留你原有的语义化结构，仅做格式化）

<ul class="timeline-tree">
  <li>1830 Palmyra
    <ul>
      <li>1837 Kirtland
        <ul>
          <li>1840 Nauvoo
            <ul>
              <li>1841 Liverpool
                <ul>
                  <li>1849 Liverpool
                    <ul>
                      <li>1854 Liverpool
                        <ul>
                          <li>1871 SaltLakeCity
                            <ul>
                              <li>1877 SaltLakeCity</li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li>1842 Nauvoo
                <ul>
                  <li>1858 NewYork
                    <ul>
                      <li>1874 Iowa
                        <ul>
                          <li>2013 SaltLakeCity</li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

改进后的CSS

/* 基础重置和树容器样式 */
.timeline-tree {
  list-style: none;
  margin: 0;
  padding-left: 0; /* 去掉默认内边距，自己控制缩进 */
  font-family: monospace; /* 用等宽字体更贴近命令行效果 */
}

.timeline-tree ul {
  list-style: none;
  margin: 0;
  padding-left: 1.5em; /* 子层级的缩进，控制线条的长度 */
  position: relative;
}

/* 为非最后一个子项添加左侧垂直连接线 */
.timeline-tree li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0.75em; /* 对齐到文本基线附近 */
  left: 0;
  width: 0;
  height: calc(100% - 0.75em); /* 从当前项基线到下一级基线的高度，避免线条溢出 */
  border-left: 1px solid #999;
}

/* 添加水平连接线，连接到父级垂直线 */
.timeline-tree li::before {
  content: '';
  position: absolute;
  top: 0.75em;
  left: -1.5em; /* 刚好对齐到父层级的padding位置 */
  width: 1.5em; /* 和子层级的padding-left一致，确保线条长度匹配 */
  height: 0;
  border-top: 1px solid #999;
}

/* 最顶层的li不需要额外线条（无父级） */
.timeline-tree > li::before,
.timeline-tree > li::after {
  display: none;
}

/* 调整li内边距，让文本和线条间距更协调 */
.timeline-tree li {
  position: relative;
  padding: 0.25em 0; /* 上下内边距控制行高，避免拥挤 */
}

关键调整点说明 #

• 等宽字体适配：用monospace字体让所有字符宽度一致，线条和文本的对齐会更精准，完全贴合命令行树的视觉效果。
• 缩进与线条长度统一：子层级的padding-left和水平线条的width设为相同值，确保水平线条刚好连接到父级的垂直线上，不会错位。
• 垂直线条高度控制：通过calc(100% - 0.75em)让垂直线只延伸到当前子项的底部，不会超出到下一个兄弟项，避免线条错乱。
• 顶层元素特殊处理：直接隐藏最外层<li>的伪元素，因为它没有父级，不需要额外的线条。
• 行高优化：给<li>设置上下内边距，让文本和线条的垂直位置更协调，整体视觉更舒适。

调整后渲染出的效果会和你想要的文本树完全一致，线条整齐、层级清晰，完全满足纯CSS实现的需求。

内容来源于stack exchange