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

我在无序列表二叉树，看起来像这样：显示无序列表为一个水平二叉树

<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的呢？

来源

2009-10-31 Smaug

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

线而变化的角度，所以忘记这样做没有一些特殊的逻辑（通过单独的HTML/CSS无法实现）
子节点似乎占据相同的垂直空间作为其他的父节点（例如，参见节点5和7），而另一些则不（见节点4和5）。这也是一些特殊的订购。

反正你尝试设置每个L1浮动左，有50％的宽度，所以每一个新的水平将越来越窄 - 还没试过。

此外，你可能会发现这个插件有趣，尽管它不使用上行线路，但资料核实，并使用jQuery的：http://www.ajaxupdates.com/jquery-binary-tree-plugin/

来源

2009-10-31 15:06:21 Seb

我试过这个插件 - 它完全没用，它只是按照没有任何逻辑的div顺序显示它。我会尝试50％的浮动和宽度...如果它不起作用，我将不得不在javascript – Smaug 2009-10-31 15:09:44

中写一些东西，50％和浮动工作...然而，在4-6级之后，宽度变得非常窄...所以我可能不得不使用相当大的页面（或者更确切地说是一个包含溢出的div：可滚动的） – Smaug 2009-10-31 15:26:24

是的，可用空间将成倍减少......另一方面，如果您需要大量空间，请考虑制作作为一个图像可用，而是在服务器端进行预处理。或者甚至可能是PDF。对于分辨率为@ 1024x768的用户来说，拥有巨大的宽页面并不是很好:) – Seb 2009-10-31 16:19:08

我确实非常相似，这东西而回，并检查了各种可用的选项。我希望能够在AJAX页面上实时更新图表，并最终使用Javascript代码生成和修改SVG图形。 Firefox对结果页面进行了非常好的响应，并且我并不担心IE根本无法应付它。

从那时起，我们已经有了更多的发展，HTML5，特别是新的canvas tag。这听起来很适合这种事情，可能值得一试。

祝你好运！

来源

2009-10-31 15:17:24 Tim

是的，我一直渴望尝试HTML5和画布标签 - 但是我需要这个在每台机器上的每个浏览器上工作，所以... – Smaug 2009-10-31 15:23:12

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

回答

相关问题