HTML和列表對我來說是一個新的層次,我正在嘗試在HTML中建立一個帶有相關編號的巢狀列表,並在第三層中使用字母編號類型。
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>
以上是我的程式碼。結果如下:
01. 01.01 01.02 01.03 02. 03. 04. 04.01 04.02 04.02.01 04.02.02 04.02.03
但我想要的是:
01. 01.01 01.02 01.03 02. 03. 04. 04.01 04.02 a. ← b. ← c. ← 04.03
有人知道如何解決這個問題嗎?
我已經嘗試了數位解決方案並蒐索了網路。這就是我得出上述解決方案的方法。但是我找不到第三級的小寫字母類型的樣式解決方案。
P粉0334291622024-04-01 13:38:08
最簡單的方法是將您的第三層清單項目變更回清單項,隱藏內容並使用小寫字母的清單樣式:
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
請檢查下面的工作程式碼:
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>