是否可以仅使用 HTML 和 CSS 创建包含连接节点的线的树组件？我试图避免包含具有 CSS 样式的文本的嵌套节点
请参阅模型作为示例。它深受Autodesk Maya 检查器树的启发
我实现了以下目标，但我不喜欢它，因为线路未连接：
https://codepen.io/xotonic/pen/JRLAOR
HTML：
<ul>
<li class="container"><p><r>Testing</r> </p>
<ul>
<li><p><r>Testing 1</r></p></li>
<li><p><r>Testing 2</r></p></li>
<li class="container"><p><r>Testing</r> </p>
<ul>
<li><p><r>Testing 1</r></p></li>
<li><p><r>Testing 2</r></p></li>
<li><p><r>Testing 3</r></p></li>
</ul>
</li>
</ul>
</li>
<li class="container"><p><r>Testing</r> </p>
<ul>
<li><p><r>Testing 1</r></p></li>
<li><p><r>Testing 2</r></p></li>
<li><p><r>Testing 3</r></p></li>
</ul>
</li>
<li class="container"><p><r>Testing </r></p>
<ul>
<li class="empty"><p><r>empty</r></p></li>
</ul>
</li>
CSS：
ul, li { list-style: none; margin: 0; padding: 0; }
ul { padding-left: 1em; }
li { padding-left: 1em;
border: 1px dotted black;
border-width: 0 0 1px 1px;
}
li.container { border-bottom: 0px;
}
li.empty { font-style: italic;
color: silver;
border-color: silver;
}
p { margin: 0;
background: white;
position: relative;
top: 0.5em;
}
p:before {
content: '';
position: absolute;
width: 1em;
border: 1px solid black;
height: 1em;
border-radius: 1em;
margin-left: 0.5em;
}
r {
margin-left: 2em;
}
ul {
border-top: 1px dotted black;
margin-left: -1em;
padding-left: 2em;
}
ul li:last-child ul {
border-left: 1px solid white;
margin-left: -17px;
}
Dylancwood为嵌套结构提供了 CSS，如问题示例中所示（ulinul而不是答案中的 in ）div。div
请参阅https://gist.github.com/dylancwood/7368914
\n保持嵌套在语义上是正确的（并且在没有任何 CSS 的情况下看起来仍然正确）！（Manuel Matuzovi\xc4\x87 写了一篇关于ol 与 ul .vs div的非常好的文章。）
\n无论如何，Dylancwood使用轻量border-left结合:before来绘制垂直和水平连接线。一个工作小提琴与他的要点有关。