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

Visualise data hierachy with HTML and CSS

本文关键字：数据 层次结构 可视化 CSS HTML 使用      更新时间：2023-09-26

下面是布局的基本图，我有一个父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*/
}

FIDDLE

相关文章：