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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值