纯HTML/CSS树布局

我正在寻找一种使用普通HTML和CSS呈现层次结构树的方法。目前（尚未）设想任何响应或互动

当我四处闲逛时，我偶然发现了另一个答案：与预期相反的结果证明效果非常好。我特别喜欢这样一个事实：树是用好的旧HTML的

/
• 标记的，所以从语义上讲，它实际上是一棵树，以我能想到的最自然的形式
  我进一步对CSS进行了一些包装，以便更易于阅读
  然而，有一个问题我无法真正抓住。当树长得很大时，它开始缠绕，这会把事情弄得一团糟。对于我的应用程序来说，它应该有一种视口，比如一个包含整个树的（大小不一的）可滚动视图
  我已经在

  float

  属性上做了一些尝试，该属性是树工作的核心，但我无法最终阻止树包装，而是希望它在可滚动容器中简单地展开
  我在这里准备了一把小提琴：

  @charset“iso-8859-1”；
  /* https://stackoverflow.com/questions/60381428/responsive-tree-diagram */
  小树{
  溢出：滚动；
  空白：nowrap；
  }
  树胶{
  位置：相对位置；
  填充顶部：40px；
  }
  /*节点*/
  李先生{
  浮动：左；
  位置：相对位置；
  文本对齐：居中；
  列表样式类型：无；
  填充：40px 5px 0px 5px；
  边际：0px；
  }
  /*线条*/
  李树：以前，
  李树：之后，
  .树ul：：以前{
  内容：''；
  位置：绝对位置；
  排名：0；
  高度：40px；
  边框顶部：1px实心#中交；
  }
  /*水平线*/
  李树：以前，
  李树：之后{
  边框顶部：1px实心#中交；
  }
  李树：以前{
  /*左线*/
  宽度：50%；
  右：50%；
  }
  李树：之后{
  /*右行*/
  宽度：50%；
  左：50%；
  }
  李树：第一个孩子：：之前，
  李树：最后一个孩子：：之后{
  /*在最外层节点之前/之后没有水平线*/
  边界：无；
  }
  李树：独生子：：之后，
  李树：独生子：：以前{
  /*没有同级的水平线*/
  显示：无；
  }
  李树：独生子女{
  /*如果没有同级，则删除水平线的填充*/
  填充顶部：0；
  }
  /*垂直线*/
  李树：之后{
  左边框：1px实心#中交；
  }
  李树：最后一个孩子：：之前{
  右边框：1px实心#ccc；
  }
  .树ul：：以前{
  /*到父节点的垂直线*/
  左：50%；
  宽度：0；
  左边框：1px实心#ccc；
  }
  /*节点内容*/
  .树木分区{
  显示：内联块；
  边框：1px实心#ccc；
  }

  
  
  母公司
  
  孩子
  
  孙子
  孙子
  孙子
  
  
  孙子
  孙子
  孙子