现在的YUI-EXT也好，DOJO也好，等等，已经提供了功能极其强大的基于tree的widget。
但是类似于组织架构图或者说水平展开的树的UI还是比较少。正好前段时间因为工作的原因做了一个，现发布上来，给需要的朋友和有兴趣的朋友参考。
原理说明：无序列表标签本身是含有结构信息的，所以我们要做的只是用css来改变的缺省的垂直布局而已。这个时候，css中float:left发挥了重要作用；另外：我们分别在div和a元素上使用2张不同的背景图片来达创建节点间连接线和掩盖连接线的多余部分。
实际效果图：
主要html代码：
<div id="contain">
<ul id="map" class="solo">
<li><div class="root section"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >XXXCompany</a></div>
<ul>
<li><div class="first"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >HR</a></div></li>
<li><div class="section"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Development</a></div>
<ul>
<li><div class="first"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Department1</a></div></li>
<li><div class="section"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Department2</a></div>
<ul>
<li><div class="first"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Group1</a></div></li>
<li><div class="last"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Group2</a></div></li>
</ul>
</li>
<li><div class="section"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Department3</a></div></li>
<li><div class="last"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Department4</a></div></li>
</ul>
</li>
<li><div class="last"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Administrator</a></div></li>
</ul>
</li>
</ul>
</div>
css代码：
div#contain {
width: 1000em;
background: none;
}
ul#map {
float: none;
margin: 0 auto;
}
ul {
clear: left;
margin: 2em 0 0 0;
padding: 0;
background: #fff;
}
ul ul {
border-top: 1px solid #000;
width: auto;
}
ul.solo {
border-top: 0;
}
li {
float: left;
list-style: none;
position: relative;
}
li li {
margin: -1px 0 0 0;
}
div {
background: url(../images/vLine.gif) 50% repeat-y;
padding: 2em 5px 0 5px;
margin: 0 .3em -2em .3em;
}
div.section {
padding: 2em 5px 2em 5px;
}
div.first {
background: url(../images/first.gif) 50% repeat-y;
margin-left: 0;
}
div.last {
background: url(../images/last.gif) 50% repeat-y;
margin-right: 0;
}
div.root {
padding-top: 0;
}
a {
display: block;
background: #fff;
border: 1px solid #000;
padding: .25em .5em .5em .5em;
color: #222;
text-decoration: none;
margin: 0 auto;
width: 10em;
line-height: 2em;
text-align: center;
font-size: 1.2em;
}
a:hover {
background: #eee;
}
![CSS的伪元素和伪类的区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)