CSS 樹中結點間空白的處理

來源:互聯網
上載者:User
用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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.