我有一個嵌套的有序列表。<ol> <li>first</li> <li>second <ol> <li>second nested first element</li> <li>second nested secondelement</li> <li>second nested thirdelement</li> </ol> </li> <li>third</li> <li>fourth</li></ol>當前，嵌套元素再次從1開始返回，例如第一第二第二個嵌套的第一個元素第二個嵌套的第二個元素第二個嵌套的第三個元素第三第四我想要的是第二個元素的編號，如下所示：第一第二2.1。第二個嵌套的第一個元素2.2。第二個嵌套的第二個元素2.3。第二個嵌套的第三個元素第三第四有辦法嗎？
3 回答
30秒到達戰場
TA貢獻1828條經驗 獲得超6個贊
我知道現在答復太晚了，但是我只是找到了一個使用CSS進行操作的示例。將此添加到您的CSS部分（或文件）：
ol.nested
{
counter-reset: item
}
li.nested
{
display: block
}
li.nested:before
{
content: counters(item, ".") ". ";
counter-increment: item
}
這是您的列表代碼的示例：
<ol class="nested">
<li class="nested">item 1</li>
<li class="nested">item 2
<ol class="nested">
<li class="nested">subitem 1</li>
<li class="nested">subitem 2</li>
</ol></li>
<li class="nested">item 3</li>
</ol>
高溫超導
明月笑刀無情
TA貢獻1828條經驗 獲得超4個贊
此頁面上的解決方案均不能在所有級別和長（包裝）段落中正確且普遍地使用。由于標記的大小可變（1，。，1.2、1.10、1.10.5等），要獲得一致的縮進確實很棘手；它不能只是“偽造”的，甚至不能為每個可能的壓痕級別使用預先計算的邊距/填充。
我終于想通了，解決實際工作，不需要任何JavaScript。
已在Firefox 32，Chromium 37，IE 9和Android瀏覽器上進行了測試。在IE 7及更高版本上不起作用。
CSS：
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, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
- 3 回答
- 0 關注
- 1369 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消