Javascript 使用HTML和CSS可视化数据层次结构

下面是布局的基本图，基本上我有一个父div，然后在其中我有子div，布局基本上显示了一些数据的层次结构。我想要实现的是在视觉上显示层次结构。正如你在下面看到的，在每个名字的左边有一行，我想要的是用边框创建这种视觉效果，这可能吗？我甚至想不出从哪里开始

Parent Div 1
    |
    |
    |- Child Div 1.a
    |- Child Div 1.b
       |
       |
       |- Child Child Div 1.1.a
    |
    |
    |
    Parent Div 2
    |
    |
    | - Child Div 2.a
    | - Child Div 2.b

---

也许这个css可以给你一个开始

div.tree div.tree {
  margin-left : 20px;    
}
div.tree div.tree:before {
  content:"| ";  /*You can use an image here maybe*/
}

---

您可以查看此插件。在CSS中查找

边框半径

和

文本对齐

属性。从我看到的地方来看，最好使用用户列表（

或
，如果有顺序）而不是
的
，后者类似于“小丑”块HTML控件，但没有语义意义