[英]Nested Ordered List Numbering Issue
我正在制作帶有嵌套數字排序列表的目錄。 它開始的很好，但是一旦我返回一個級別，編號就會結束。 如您所見，一旦達到第4級，不僅編號開始減少，而且現在無論級別如何，所有內容都有一個額外的編號。
這就是我的最終結果：
SECTION 1
1 Item 1
1.1 Sub Item
1.1.1 Level 3 Item
1.1.1.1 Level 4 Item
1.1.1.2 Level 4 Item
1.1.1.3 Level 4 Item
1.1.1.4 Level 4 Item
1.1.1.5 Level 4 Item
1.1.1.6 Level 3 Item
1.1.1.1 Level 4 Item
1.1.1.2 Level 3 Item
1.1.1.3 Level 3 Item
1.1.2 Level 2 Item
這是我正在使用的代碼：
ol.toc { counter-reset: item; } li.toc { display: block; } li.toc:before { content: counters(item, ".") " "; counter-increment: item; }
<!DOCTYPE html> <html> <head> <title>Table of Contents</title> </head> <body> <div> <h2>SECTION 1</h2> </div> <div style="float: clear;"> <ol class="toc"> <li class="toc"> Item 1</li> <ol class="toc"> <li class="toc"> Sub Item</li> <ol class="toc"> <li class="toc"> Level 3 Item</li> <ol class="toc"> <li class="toc"> Level 4 Item</li> <li class="toc"> Level 4 Item</li> <li class="toc"> Level 4 Item</li> <li class="toc"> Level 4 Item</li> <li class="toc"> Level 4 Item</li> </ol> <li class="toc"> Level 3 Item</li> <ol class="toc"> <li class="toc"> Level 4 Item</li> </ol> <li class="toc"> Level 3 Item</li> <li class="toc"> Level 3 Item</li> </ol> <li class="toc"> Level 2</li> </ol> </ol> </div> </body> </html>
不知道發生了什么。 我找不到太多適合我需要的示例。
感謝您的幫助！
我認為編號錯誤，因為您應該將每個子<ol>包裝在其父<li> 。 為了獲得更好的外觀，請設置list-style-type:none; 最上層的父<ol> 。
看看這個：
ol.toc { counter-reset: item; } li.toc { display: block; } li.toc:before { content: counters(item, ".") " "; counter-increment: item; } .outer li { list-style-type: none; }
<!DOCTYPE html> <html> <head> <title>Table of Contents</title> </head> <body> <div> <h2>SECTION 1</h2> </div> <div style="float: clear;"> <ol class="toc outer"> <li class="toc"> Item 1</li> <ol class="toc"> <li class="toc"> Sub Item</li> <li> <ol class="toc"> <li class="toc"> Level 3 Item</li> <li> <ol class="toc"> <li class="toc"> Level 4 Item</li> <li class="toc"> Level 4 Item</li> <li class="toc"> Level 4 Item</li> <li class="toc"> Level 4 Item</li> <li class="toc"> Level 4 Item</li> </ol> </li> <li class="toc"> Level 3 Item</li> <li> <ol class="toc"> <li class="toc"> Level 4 Item</li> </ol> </li> <li class="toc"> Level 3 Item</li> <li class="toc"> Level 3 Item</li> </ol> </li> <li class="toc"> Level 2</li> </ol> </ol> </div> </body> </html>
TinyMce 嵌套有序列表十進制編號，具有不同的編號樣式
[英]TinyMce nested ordered list decimal numbering with different numbering styles
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.