Rumah > Soal Jawab > teks badan
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粉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>
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>