cari

Rumah  >  Soal Jawab  >  teks badan

Senarai bersarang dalam gaya yang berbeza

HTML dan senarai adalah tahap baharu bagi saya, saya cuba mencipta senarai bersarang dalam HTML dengan nombor berkaitan dan menggunakan jenis alfanumerik dalam tahap ketiga. 

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>

Di atas adalah kod saya. Keputusan adalah seperti berikut: 

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

Tetapi apa yang saya mahukan ialah: 

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

Ada sesiapa tahu bagaimana untuk menyelesaikan masalah ini?

Saya telah mencuba penyelesaian digital dan mencari di web. Inilah cara saya sampai pada penyelesaian di atas. Tetapi saya tidak dapat mencari penyelesaian penggayaan untuk jenis huruf kecil peringkat ketiga.

P粉998920744P粉998920744267 hari yang lalu411

membalas semua(2)saya akan balas

  • P粉033429162

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

    Cara paling mudah ialah menukar item senarai peringkat ketiga anda kembali kepada item senarai, sembunyikan kandungan dan gunakan gaya senarai dengan huruf kecil: 

    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>

    balas
    0
  • P粉488464731

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

    Sila semak kod kerja di bawah: 

    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>

    balas
    0
  • Batalbalas