简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Q&A  >  body text

Nested lists in different styles

HTML and lists are a new level for me, I'm trying to create a nested list in HTML with related numbers, and use an alphanumeric type in the third level. 

body {
  padding-left: 100px;
}

ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}

ol>li {
    display: table;
    counter-increment: item;
    margin-bottom: 0.6em;
}

ol>li:before {
    content: counters(item, ".",decimal-leading-zero) ". ";
    display: table-cell;
    padding-right: 0.6em;
}

li ol>li {
    margin: 0;
}

li ol>li:before {
    content: counters(item, ".",decimal-leading-zero) " ";
}
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

The above is my code. The results are as follows: 

01.
  01.01
  01.02
  01.03
02.
03.
04.
  04.01
  04.02
      04.02.01
      04.02.02
      04.02.03

But what I want is: 

01.
  01.01
  01.02
  01.03
02.
03.
04.
  04.01
  04.02
        a.  ←
        b.  ←
        c.  ←
  04.03

Does anyone know how to solve this problem?

I have tried digital solutions and searched the web. This is how I arrived at the above solution. But I can't find a styling solution for the lowercase type of the third level.

P粉998920744P粉998920744185 days ago280

reply all(2)I'll reply

  • P粉033429162

    P粉0334291622024-04-01 13:38:08

    The easiest way is to change your third level list items back to list items, hide the content and use a list style with lowercase letters: 

    ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol>li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol>li:before {
  content: counters(item, ".", decimal-leading-zero) ". ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol>li {
  margin: 0;
}

li ol>li:before {
  content: counters(item, ".", decimal-leading-zero) " ";
}

/* 下面的样式添加，其他内容不变 */

ol ol ol {
  list-style-type: lower-alpha;
}

ol ol ol li {
  display:list-item;
  margin-left: 1em;
}
ol ol ol li:before {
  content: none;
}
    <ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

    reply
    0
  • P粉488464731

    P粉4884647312024-04-01 13:27:34

    Please check the working code below: 

    ol {
        list-style-type: none;
        counter-reset: item;
        margin: 0;
        padding: 0;
    }

    ol>li {
        display: block;
        counter-increment: item;
        margin-bottom: 0.6em;
        padding-left: 15px;
    }

    ol>li:before {
        content: counters(item, ".",decimal-leading-zero) ". ";
        display: table-cell;
        padding-right: 0.6em;
    }

    li ol>li {
        margin: 0;
    }

    li ol>li:before {
        content: counters(item, ".",decimal-leading-zero) " ";
    }
    
    ol>li>ol>li>ol
    {
    counter-reset: listStyle;
    }
    
        ol>li>ol>li>ol li{
  margin-left: 1em;
  counter-increment: listStyle;
}
        
        ol>li>ol>li>ol li::before {
  margin-right: 1em;
  content: counter(listStyle, lower-alpha);
}
    <html>

<head>

</head>

<body>

</body>
<ol>
    <li>
      <ol>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </li>
    <li></li>
    <li></li>
    <li>
      <ol>
        <li></li>
        <li>
          <ol>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</body>

</html>

    reply
    0
  • Cancelreply