html - 纯 HTML/CSS 树形布局

Question

我正在寻找一种使用纯 HTML 和 CSS 呈现分层树的方法。（尚未）设想任何响应性或交互性。

在摆弄时，我偶然发现了另一个 SO 答案：与预期相反的响应式树图证明工作得非常好。我特别喜欢树是使用旧 HTML 的 <ul>/<li> 标签标记的事实，所以从语义上讲，它实际上是一棵树，是我能想到的最自然的形式。

我进一步对 CSS 进行了一些封装，以便对我来说更具可读性。

但是，有一个问题我无法真正掌握。当树变大时，它开始缠绕，这有点搞砸了。对于我的应用程序来说，有一种视口是合适的，比如一个包含整个树的（某种大小的）可滚动的 <div>。

我已经在树工作的中心属性上尝试了几件事float，但我最终无法阻止树包裹，而是我希望它在可滚动容器内简单地展开。

我在这里准备了一个小提琴：

@charset "iso-8859-1";

/* https://stackoverflow.com/questions/60381428/responsive-tree-diagram */

div.tree {
  overflow: scroll;
  white-space: nowrap;
}

.tree ul {
  position: relative;
  padding-top: 40px;
}

/* nodes */
.tree li {
  float: left;
  position: relative;
  text-align: center;
  list-style-type: none;
  padding: 40px 5px 0px 5px;
  margin: 0px;
}

/* lines */
.tree li::before,
.tree li::after,
.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  height: 40px;
  border-top: 1px solid #CCCCCC;
}

/* horizontal lines */
.tree li::before,
.tree li::after {
  border-top: 1px solid #CCCCCC;
}

.tree li::before {
  /* left line */
  width: 50%;
  right: 50%;
}

.tree li::after {
  /* right line */
  width: 50%;
  left: 50%;
}

.tree li:first-child::before,
.tree li:last-child::after {
  /* no horizontal lines before/after outermost nodes */
  border: none;
}

.tree li:only-child::after,
.tree li:only-child::before {
  /* no horizontal lines without siblings */
  display: none;
}

.tree li:only-child {
  /* remove padding to horizontal line if no siblings */
  padding-top: 0;
}

/* vertical lines */
.tree li::after {
  border-left: 1px solid #CCCCCC;
}

.tree li:last-child::before {
  border-right: 1px solid #ccc;
}

.tree ul ul::before {
  /* vertical line to parent node */
  left: 50%;
  width: 0;
  border-left: 1px solid #ccc;
}

/* Node content */
.tree div {
  display: inline-block;
  border: 1px solid #ccc;
}

<div class="tree">
<ul>
    <li><div>Parent</div>
        <ul>
            <li><div>Child</div>
                <ul>
                    <li><div>Grand Child</div></li>
                    <li><div>Grand Child</div></li>
                    <li><div>Grand Child</div></li>
                </ul>
            </li>
            <li><div>Grand Child</div></li>
            <li><div>Grand Child</div></li>
            <li><div>Grand Child</div></li>
        </ul>
    </li>
</ul>
</div>

非常感谢任何帮助，以及对我错了什么的解释。

标签： htmlcss