javascript - 如何在 javascript/Angular4+ 中用垂直线显示分层垂直数据？

Question

我有一个要求以分层方式显示一些对象，如下所示。

这个层级是固定的，不需要动态子节点。

任何 css 演示代码都会有所帮助。谢谢。

Answer 1

下面是一些 CSS，用于使用 ul 和 li 创建树结构:

ul.tree, ul.tree ul {
    list-style: none;
     margin: 0;
     padding: 0;
   } 
   ul.tree ul {
     margin-left: 10px;
   }
   ul.tree li {
     margin: 0;
     padding: 0 7px;
     line-height: 20px;
     color: #369;
     font-weight: bold;
     border-left:1px solid rgb(100,100,100);

   }
   ul.tree li:last-child {
       border-left:none;
   }
   ul.tree li:before {
      position:relative;
      top:-0.3em;
      height:1em;
      width:12px;
      color:white;
      border-bottom:1px solid rgb(100,100,100);
      content:"";
      display:inline-block;
      left:-7px;
   }
   ul.tree li:last-child:before {
      border-left:1px solid rgb(100,100,100);   
   }

<ul class="tree">
    <li>2 Hosts
    </li>
    <li>10 objects
     <ul>
      <li>4 Type a
      </li>
      <li>4 Type b
      </li>
      <li>4 Type c
      </li>
     </ul>
    </li>
   </ul>