html 仅使用CSS显示树列表的最佳方法(没有图像或JS，示例在内部)

2j4z5cfb 于 2022-12-09 发布在其他

关注(0)|答案(2)|浏览(123)

我想在HTML页面上显示如下内容：

主要的问题在于创建这些：｜└ ├“分支”。

上面的例子是我自己做的一个解决方案。每个分支都有相同的宽度和组成：

<ul>
    <li></li>
    <li></li>
</ul>

诀窍是将<li>的边框相应地变黑。
我遇到的一个问题是把边框变成白色来匹配背景，而不是透明的（显然CSS在列表上有一些透明边框的问题）。

我的问题是：最简单的解决方案是什么？有没有更好的方法？

编辑：一些要求：

EDIT2：http://en.wikipedia.org/wiki/Template:Tree_list做了一点研究，唉，他们用图像来做分支。

2条答案

我能想到的最好的方法是嵌套和使用生成的内容（不幸的是，这很遗憾）（所以它确实需要一个非常新的浏览器，所以IE〈8看起来不会很漂亮），然而，也就是说，考虑到HTML：
第一个
我们得到：

下面是大卫解决方案的一个分支，它消除了对每个<li>中的额外<div>的需要：
第一个
Demo on JS Bin