顯示無序列表爲一個水平二叉樹

我在無序列表二叉樹，看起來像這樣：顯示無序列表爲一個水平二叉樹

<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

顯示無序列表爲一個水平二叉樹

回答

相關問題