2

对于站点地图页面，我有有序的文本和页面在树中多远的相关“级别”。

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

4

2 回答 2

3

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

于 2013-11-07T09:53:05.723 回答
-1

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

于 2013-11-07T09:55:15.940 回答