站点地图树缩进可视化

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/

Answer 2

我能想到的最接近的css属性是'quotes'，它允许你为不同级别的引号定义不同的符号。