javascript - 使用 css/js 正确对齐基于树的列表

Question

从子级缩进到某种程度的意义上来说，我的数据本身很好，但是对于我有连接器的情况，对齐是关闭的。我正在努力实现看起来像这样的东西

Item1
 Child1
  Child1-2
 Child2
  Child2-2
Item2

所有元素/div 都在右侧对齐。我尝试使用 float: right 并以此为基础进行构建，但 div 失去了高度。我渲染的连接器根据父级/先前的 div 计算其高度，所以我不确定该怎么做。

问题:尝试以有意义的方式正确对齐 div。例如
我试图将子元素右对齐，我的 jsfiddle 中的对齐在第 2 级 chil 上是错误的，而且我不完全知道解决它的最佳方法

JsFiddle:https://jsfiddle.net/qatuvha5/28/

颜色是用来区分 child 生活的水平

Answer 1

尝试向子包装容器添加填充:

.categorylevel.level-2 {
  padding-left: 30px;
}

Updated example