javascript - 站点地图树缩进可视化

对于一个站点地图页面，我有有序的文本和相关的“级别”页面在树中的距离。
现在我们有最简单的缩进外观使用CSS页边距，我们希望它看起来更时髦。
下面是示例代码和指向测试页的链接：
HTML格式：

<div class='sitemapItem'>
  <a href="#">
    <div class='sitemapLevelX'>FOO</div>
  </a>
</div>

CSS:

.sitemapLevelX{
    margin-left:Ypx;
}

示例代码可以在以下位置找到：
http://jsfiddle.net/m77TR/1/
我包括以下图片以了解我的目标：
是否可以相对简单地使用CSS？或者我需要在上面撒一些javascript？

最佳答案

您只需使用嵌套的ul即可实现此结构：

<ul>
    <li>level 1</li>
    <li>level 1</li>
    <li>level 1 with sub
        <ul>
            <li>level 2</li>
            <li>level 2</li>
        </ul>
    </li>
</ul>

这样您就可以在HTML中轻松地定义这种子树结构。在此之后，您可以更改CSS中的样式以满足您的需要。
在这里可以看到您所需布局的演示：http://jsfiddle.net/N4JH2/以及如何在这里完成此操作的教程：http://www.csscody.com/css/css-sitemap-design-tutorial/594/

关于javascript - 站点地图树缩进可视化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19832684/