请问一个横排分层目录树的解决思路.

有一大堆数据,如html,head,body,table,div,ul.他们的关系如图片里的那样.
要能随意添加,删除,修改其中的数据.
最后的展示形式就像图片里的那样,因为每一个数据都要做链接链到另外的网页,所以不能做成一个图片,最好是DIV+CSS来表现.
以下是我的在排版上的一些想法
我们假如,
一共只有三行,
第一行html,第二行head,body,第三行head下面有2个,body下面有4个.
第一行,写html, html居中显示
第二行写 head,和body,但head和body的位置怎么办?不能简简单单的总宽度的二分之一再居中的.  这两个的位置要考虑到head和body下面的子节点,上面我们假设过了.第三行只有6个,那么这六个总宽度除6平分.其中head下有两个,那么head的位置是在总宽度的三分之一的基础上居中,body则是在三分之二的基础上居中.以此类推,当我们有超过10层的数据时,怎么办?如果仅仅是判断出第一行有几个节点,然后再把行宽除节点数均分,视觉效果肯定不好看.哪位可以指点一下吗?