用CSS產生樹時,如果要產生類似如下的樹時,結點之間會有空白.其中的 + | ----- 之類的一般做成高度相同的圖片, 以便於對齊.
Root
|----Node1
|----Node2
|----Node3
+---Node4
+---Node5
一段樣本如下:
<div><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif" border="0"/>Node0</div>
<div><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif" border="0"/>Node1</div>
<div><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif" border="0"/>Node2</div>
<div><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif" border="0"/>Node3</div>Node0Node1Node2Node3
在包含的DIV標籤中加上CSS屬性 height:20px, 即可去除空白, 如下所示
<div style="height:20px;"><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif" border="0"/>Node0</div>
<div style="height:20px;"><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif" border="0"/>Node1</div>
<div style="height:20px;"><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif" border="0"/>Node2</div>
<div style="height:20px;"><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif" border="0"/>Node3</div>
Node0Node1Node2Node3
其中 IMG 元素的 align 為 top 或預設的 bottom 時都可以去除, 但用 absmiddle 時因為種種原因(瀏覽器在計算高度時的誤差, IE 7 中這個問題似乎得到的修正, 但在 Firefox 中還是會有空白), 會留下一條線. 將文字的位置對齊後, 最終的代碼如下:
<div style="height:20px;"><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif" border="0" align="top"/><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/folder.gif" border="0" align="top"/>Node0</div>
<div style="height:20px;"><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif" border="0" align="top"/><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/folderopen.gif" border="0" align="top"/>Node1</div>
<div style="height:20px;"><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif" border="0" align="top"/><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_line2.gif" border="0" align="top"/>Node2</div>
<div style="height:20px;"><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif" border="0" align="top"/><img src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/folder.gif" border="0" align="top"/>Node3</div>
Node0Node1Node2Node3
