具有多个子父级（多对一和一对多）的CSS族树表示

我见过很多家谱图。我的问题是，我们能代表一对多，然后是多对一的水平吗？目前，我们一个接一个地表示一个停止流，但我们希望创建一个包含多个步骤的级别，然后返回到单个步骤。我看到了一个反向的家谱（180度旋转）。有可能合并这两个概念吗

.tree{
保证金：0；
填充：0；
}
树胶{
填充顶部：20px；
位置：相对位置；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
李先生{
浮动：左；
文本对齐：居中；
列表样式类型：无；
位置：相对位置；
填充：20px 5px 0 5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
李树：以前，
李树：之后{
内容：''；
位置：绝对位置；
排名：0；
右：50%；
边框顶部：1px实心#ccc；
宽度：50%；
高度：20px；
}
李树：之后{
右：自动；
左：50%；
左边框：1px实心#ccc；
}
李树：独生子：：之后，
李树：独生子：：以前{
显示：无；
}
李树：独生子女{
填充顶部：0；
}
李树：第一个孩子：：之前，
李树：最后一个孩子：：之后{
边界：0无；
}
李树：最后一个孩子：：之前{
右边框：1px实心#ccc；
边界半径：0 5px 0 0；
-webkit边界半径：0 5px 0；
-moz边界半径：0 5px 0；
}
李树：第一个孩子：：之后{
边界半径：5px0；
-webkit边界半径：5px 0；
-moz边界半径：5px 0；
}
.树ul：：以前{
内容：''；
位置：绝对位置；
排名：0；
左：50%；
左边框：1px实心#ccc；
宽度：0；
高度：20px；
}
李树先生{
边框：1px实心#ccc；
填充物：5px10px；
文字装饰：无；
颜色：#666；
字体系列：arial、verdana、tahoma；
字体大小：11px；
显示：内联块；
边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
李树答：悬停，
.树李a：悬停+ul李a{
背景：c8e4f8；
颜色：#000；
边框：1px实心#94a0b4；
}
.树李a:悬停+ul李：：之后，
.树李a:悬停+ul李：：之前，
.树李a:悬停+ul：：之前，
.树李a:悬停+ul:：之前{
边框颜色：#94a0b4；
}

更新：使用CSS flexbox属性可以实现所需的可视化

---

你不应该提供图片作为链接，而应该将其嵌入到你的帖子中。检查修订版3。