2
感謝您的關注，首先我相信圖像值得一萬字的，所以在這裏你去 
如何使用CSS和HTML創建水平樹視圖？
可惜我不是藏鼠標右鍵現在，所以它的使用IBM指點杆繪製，但主要的想法應該是明確。 我把它叫做水平樹，因爲通常樹形視圖是垂直的，所以你只能在一行上看到一個目錄，而在目錄名的左邊只會顯示垂直線，顯示這個目錄的嵌套深度。我正在嘗試將「目錄」列在一起。
把它看作是帶有IF和ENDIF的算法圖，它們總是隻有兩個輸出或輸入。
現在，我試圖用基本的HTML元素和CSS構建這個，我一開始以爲它會是小菜一碟，但事實並非如此，我整個下午都沒有運氣。它將由JS動態生成，所以我試圖避免表。我可以有任意數量的IF，會有完全相同數量的ENDIF。將會有任何數量的其他基本單元。整個結構與一個細胞開始，以一個單元結束
這裏是HTML應該產生similiar圖片：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IFs and ENDIFs</title>
<style>
ul, li, div{
margin: 0px;
padding: 0px;
border: 0px;
}
ul.left{
border: 1px solid red;
margin: 2px;
padding: 2px;
list-style-type:none;
width: 150px;
float:left;
}
ul.right{
border: 1px solid green;
margin: 2px;
padding: 2px;
list-style-type:none;
width: 150px;
float:left;
}
}
li.parent{
border: 1px solid blue;
background-color:#CC9;
margin: 2px;
padding: 2px;
min-width: 350px;
display:block;
overflow-style:marquee-block;
}
</style>
</head>
<body>
<div id="root">
<ul>
<li class="parent">
<div class="label">1</div>
<ul class="left">
<li>
<div class="label">1.L1</div>
</li>
<li>
<div class="label">1.L2</div>
</li>
<li class="parent">
<div class="label">1.L3</div>
<ul class="left">
<li>
<div class="label">1.L3.L1</div>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.L3.R1</div>
</li>
<li>
<div class="label">1.L3.R2</div>
</li>
</ul>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.R1</div>
</li>
<li>
<div class="label">1.R2</div>
</li>
<li class="parent">
<div class="label">1.R3</div>
<ul class="left">
<li>
<div class="label">1.R3.L1</div>
</li>
<li>
<div class="label">1.R3.L2</div>
</li>
<li>
<div class="label">1.R3.L3</div>
</li>
<li>
<div class="label">1.R3.L4</div>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.R3.R1</div>
</li>
<li>
<div class="label">1.R3.R2</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="label">2</div>
</li>
<li>
<div class="label">3</div>
</li>
</ul>
</div>
</body>
</html>
這裏是什麼樣子至今:(結果，我希望不久的（無對，也該是我的大概7反覆試圖弄清楚這一點），因此，如果任何人都可以在正確的方向指向我，我真的很感激它。 
嘗試僱用某人。這似乎是你之後有人爲你做這件事。你需要什麼幫助？你在哪個部分掙扎着。 Javascript的邏輯？造型？ – gunwin 2011-04-06 01:26:28
我不好，我正在努力將元素彼此相鄰，以防他們是孩子。正如我在底部的例子中，我設法讓父母「1」的孩子「1.L」和「1.R」彼此相鄰，但是我沒有深入其中。 但是，謝謝你，告訴我僱用一個人。我正在努力做一些事情，對我自己，我不賺錢，我也想弄清楚我在哪裏犯錯。在盯着我的筆記本電腦14個小時後（第一次花費12個東西的工作:)直）我可能會忽略一些基本的東西。不管怎樣，這個網站不是基於互相幫助嗎？ – nana 2011-04-06 01:36:21
這不是一棵樹。這是一個循環圖。 – 2011-04-06 03:44:32