|
用CSS生成树时,如果要生成类似如下的树时,结点之间会有空白.其中的 + | ----- 之类的一般做成高度相同的图片, 以便于对齐.
Root
|----Node1
|----Node2
|----Node3
+---Node4
+---Node5
一段示例如下:
<div><img src="http://WWW.ITWIS.COM/_plus1.gif" border="0"/>Node0</div>
<div><img src="http://WWW.ITWIS.COM/minus1.gif" border="0"/>Node1</div>
<div><img src="http://WWW.ITWIS.COM/_line4.gif" border="0"/>Node2</div>
<div><img src="http://WWW.ITWIS.COM/_plus1.gif" border="0"/>Node3</div>
 Node0  Node1  Node2 Node3
在包含的DIV标签中加上CSS属性 height:20px, 即可去除空白, 如下所示
<div style="height:20px;"><img src="http://WWW.ITWIS.COM/_plus1.gif" border="0"/>Node0</div>
<div style="height:20px;"><img src="http://WWW.ITWIS.COM/_minus1.gif" border="0"/>Node1</div>
<div style="height:20px;"><img src="http://WWW.ITWIS.COM/_line4.gif" border="0"/>Node2</div>
<div style="height:20px;"><img src="http://WWW.ITWIS.COM/_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://WWW.ITWIS.COM/plus1.gif" border="0" align="top"/><img src="http://WWW.ITWIS.COM/folder.gif" border="0" align="top"/>Node0</div>
<div style="height:20px;"><img src="WWW.ITWIS.COM/_minus1.gif" border="0" align="top"/><img src="http://WWW.ITWIS.COM/folderopen.gif" border="0" align="top"/>Node1</div>
<div style="height:20px;"><img src="http://WWW.ITWIS.COM/line4.gif" border="0" align="top"/><img src="http://WWW.ITWIS.COM/_line2.gif" border="0" align="top"/>Node2</div>
<div style="height:20px;"><img src="http://WWW.ITWIS.COM/_plus1.gif" border="0" align="top"/><img src="http://WWW.ITWIS.COM/folder.gif" border="0" align="top"/>Node3</div>
 Node0  Node1  Node2 Node3
| 
