Question 222980 in Html Question posted in
Some basic documentation can be found here.

Html – Mixed multilevel list in CSS

everyone!
How can I make mixed multilevel list in CSS similar like this:

enter image description here result

I try this variant. But this paste counter to unordered list

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

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

2

Answers


  1. 0

    You can use counting

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

li:before {
    counter-increment: section;
    content: counters(section, ".") ". Link " counters(section, ".") " ";
}
    <ol>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li>
    <ol>
      <li>    
        <ol>
        <li></li>
        <li></li>
        </ol>
      </li>
    </ol>
  </li>
  <li></li>
</ol>
    Login or Signup to reply.
  2. 0

    To create a multi-level list like the one you’ve described using HTML and CSS, you can use nested ul (unordered list) and li (list item) elements. The structure of the list will represent the hierarchy of the chapters and titles. Here’s an example of how you can achieve this:

    <!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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search