如何用CSS将表示生命树的嵌套Div呈现为列状布局

嘿，这个需求真的不需要复杂的JS或者布局方案，几行CSS就能轻松搞定！

你要的是把嵌套的生命树节点按深度优先顺序垂直排列（也就是Hominidae → Pan → Chimpanzee → Bonobo → Homo → Sapiens依次占一行），其实核心就是让所有嵌套的div内容都能“扁平化”显示，或者去掉默认的层级缩进。

方案1：简单重置样式（适合仅需去掉缩进的场景） #

如果你的嵌套div因为默认样式（比如浏览器默认的padding/margin，或者自定义的缩进）导致层级缩进，只需要重置所有div的内边距和外边距，同时让它们都以块级元素显示：

<div class="tree">
  Hominidae
  <div>
    Pan
    <div>Chimpanzee</div>
    <div>Bonobo</div>
  </div>
  <div>
    Homo
    <div>Sapiens</div>
  </div>
</div>

.tree div {
  margin: 0;
  padding: 0;
  display: block; /* 确保每个节点单独占一行 */
}

这样就能让所有节点垂直排列，没有缩进，完全符合你要的顺序。

方案2：用display: contents扁平化结构（更彻底的层级消除） #

如果你想彻底消除嵌套div的层级结构，让所有节点都成为最外层容器的直接子元素，可以用CSS的display: contents属性——它会让父元素“消失”，子元素直接融入父元素的上下文：

.tree {
  display: flex;
  flex-direction: column; /* 强制所有节点垂直排列 */
  gap: 6px; /* 可选：添加节点间的间距，提升可读性 */
}

.tree div {
  display: contents; /* 扁平化所有嵌套层级 */
}

/* 确保每个节点文本块级显示 */
.tree > * {
  display: block;
}

这个方案的好处是不管你的div嵌套多少层，最终所有节点都会被扁平化处理，统一垂直排列，完全不需要JS来遍历DOM结构，完美契合你“少量CSS实现”的需求。

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