Javascript 将无序列表显示为水平二叉树

我在无序列表中有一个二叉树，如下所示：

<ul>
<li>1
    <ul> 
        <li>2
            <ul> 
                <li>4
                    <ul> 
                        <li>8</li> 
                        <li>--</li>
                    </ul> 
                </li> 
                <li>5</li> 
            </ul> 
        </li> 
        <li>3
            <ul> 
                <li>6</li> 
                <li>7</li> 
            </ul> 
        </li> 
    </ul> 
</li>

一,

二,

四,

8
--


5


三,

6
7

其中——是一个空白（用于区分左/右子项）

它显示为一个典型的无序列表。但这很难阅读和浏览。我需要一棵像这样的水平树：

<ul>
<li>1
    <ul> 
        <li>2
            <ul> 
                <li>4
                    <ul> 
                        <li>8</li> 
                        <li>--</li>
                    </ul> 
                </li> 
                <li>5</li> 
            </ul> 
        </li> 
        <li>3
            <ul> 
                <li>6</li> 
                <li>7</li> 
            </ul> 
        </li> 
    </ul> 
</li>

节点之间可以有线，也可以没有线

---

我的问题是-这可以通过html/css单独实现，还是需要使用javascript实现？

听起来是个不错的主意，但我觉得很难实现

• 线条的角度各不相同，所以不要考虑在没有特殊逻辑的情况下（仅通过HTML/CSS是无法实现的）
• 子节点似乎与其他父节点（例如，请参见节点5和7）占据相同的垂直空间，而其他节点则没有（请参见节点4和5）。这也是一些特别的订货

无论如何，你试着将每个LI设置为向左浮动，宽度为50%，这样每个新的级别将越来越窄-还没有尝试过

---

此外，您可能会发现这个插件很有趣，尽管它不使用ULs，而是使用DIVs和jQuery:

我不久前做了一些非常类似的事情，并检查了各种可用的选项。我希望能够在AJAX页面上实时更新图表，并最终使用Javascript代码生成和修改图形。Firefox非常好地处理了生成的页面，我也不担心IE根本无法处理它

自那时以来，我们有了更多的发展，特别是新的发展。这听起来很适合做这类事情，也许值得一试

---

祝你好运

我试过这个插件-它完全没有用，它只是按div的顺序显示，没有任何逻辑。我将尝试50%的浮动和宽度。。。如果它不起作用，我将不得不用JavaScriptOk写一些东西好的，50%和浮动有效。。。然而，在4-6级之后，宽度变得非常窄。。。所以我可能不得不使用相当大的页面（或者更确切地说是一个包含溢出的div:scrollable）是的，可用空间将以指数方式减少。。。另一方面，如果你需要足够的空间，可以考虑把它作为一个图像来替代，对服务器端进行预处理。或者甚至是一份PDF。对于分辨率为@1024x768:）的用户来说，拥有一个巨大的宽页面并不太好。是的，预处理可能是最好的主意。。。我需要这主要是为了让用户看到他们的传销下线报告-所以一些额外的处理时间不会伤害。是的，我一直渴望尝试HTML5和画布标签-但我需要这在每台机器上的每个浏览器工作，所以。。。