Question

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

<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>

其中 - 是一个空白区域（左/右孩子不同）。

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

http://www.knowledgerush.com/wiki_image/d/df/Binary_tree.png

它可以有或没有节点之间的线。

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

Answer 1

听起来很棒，但我觉得很难实现。

线条角度不同，所以忘记在没有一些特殊逻辑的情况下进行操作（单靠HTML / CSS无法实现）
子节点似乎占用与其他父节点相同的垂直空间（例如参见节点5和7），而其他节点则不占用（参见节点4和5）。这也是一些特别的订购。

无论如何，你尝试将每个LI设置为向左浮动并且宽度为50％，因此每个新级别将更窄更窄 - 尚未尝试过。

此外，你可能会发现这个插件很有趣，虽然它不使用UL而是使用DIV并使用jQuery：http://www.ajaxupdates.com/jquery-binary-tree-plugin/

Answer 2

我做了一段非常类似于此的事情，并检查了可用的各种选项。我希望能够在AJAX页面上实时更新图表，最后使用Javascript代码生成和修改SVG图形。 Firefox处理得到的页面非常好，响应性很强，我并不担心IE根本不能应对它。

从那时起，我们在HTML5，特别是新canvas tag方面取得了更多进展。这听起来很适合这类事情，可能值得一试。

祝你好运！

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

2 个答案: