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

Question

对于站点地图页面，我有有序的文本以及页面在树中的距离的关联“级别”。

现在，我们使用 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 吗？

Answer 1

您可以使用嵌套 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/