CSS中的混合多级列表

nvbavucw 于 2023-08-09 发布在其他

关注(0)|答案(2)|浏览(82)

大家好！我如何在CSS中制作类似这样的混合多级列表：
enter image description here结果
我尝试这个变种。但是这个粘贴计数器是无序列表

ol {
    counter-reset: section;
    list-style-type: none;
}

ol li:before {
    counter-increment: section;
    content: counters(section, ".") " ";
}

字符串

css

来源：https://stackoverflow.com/questions/76835685/mixed-multilevel-list-in-css

2条答案

按热度按时间

xxslljrj1#

你可以用计数

ol {
    counter-reset: section;
    list-style-type: none;
}

li:before {
    counter-increment: section;
    content: counters(section, ".") ". Link " counters(section, ".") " ";
}

个字符

赞(0）回复(0）举报 2023-08-09

fdbelqdn2#

要使用HTML和CSS创建一个多级列表，如您所描述的，可以使用嵌套的ul（无序列表）和li（列表项）元素。列表的结构将代表章节和标题的层次结构。下面是一个如何实现这一点的示例：

<!DOCTYPE html>
<html>

<head>
    <title>Multi-Level List Example</title>
    <style>
        ul,
        li {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .chapter-list {
            counter-reset: chapter;
        }

        .chapter-list>li:before {
            counter-increment: chapter;
            content: counter(chapter) ". ";
        }

        .title-list {
            counter-reset: title;
            margin-left: 20px;
        }

        .title-list>li:before {
            counter-increment: title;
            content: counter(chapter) "." counter(title) " ";
        }

        .sub-title-list {
            counter-reset: sub-title;
            margin-left: 40px;
        }

        .sub-title-list>li:before {
            counter-increment: sub-title;
            content: counter(chapter) "." counter(title) "." counter(sub-title) " ";
        }
    </style>
</head>

<body>
    <ul class="chapter-list">
        <li>Chapter 1</li>
        <li>Chapter 2
            <ul class="title-list">
                <li>Title 1</li>
                <li>Title 2
                    <ul class="sub-title-list">
                        <li>Sub 1</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Chapter 3</li>
    </ul>
</body>

</html>

字符串

赞(0）回复(0）举报 2023-08-09

我来回答

CSS中的混合多级列表

2条答案

相关问题

热门标签

最新问答