CSS 树中结点间空白的处理

用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>

Node0

Node1

Node2

Node3

在包含的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>

Node0

Node1

Node2

Node3

其中 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>

Node0

Node1

Node2

Node3