數字嵌套HTML中的有序列表
[英]Number nested ordered lists in HTML
問題描述
我有一個嵌套的有序列表。
<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。 第二個嵌套的第三個元素
- 第三
- 第四
有辦法做到這一點嗎？
6 個解決方案
解決方案1
35 已采納 2010-04-28 13:57:38
這是一個適用於所有瀏覽器的示例。 純CSS方法適用於真正的瀏覽器（即IE6 / 7以外的所有內容）和jQuery代碼，以涵蓋不受支持的。 它具有SSCCE的味道，你可以直接復制'n'paste'n'run它沒有變化。
<!doctype html>
<html lang="en">
<head>
<title>SO question 2729927</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
if ($('ol:first').css('list-style-type') != 'none') { /* For IE6/7 only. */
$('ol ol').each(function(i, ol) {
ol = $(ol);
var level1 = ol.closest('li').index() + 1;
ol.children('li').each(function(i, li) {
li = $(li);
var level2 = level1 + '.' + (li.index() + 1);
li.prepend('<span>' + level2 + '</span>');
});
});
}
});
</script>
<style>
html>/**/body ol { /* Won't be interpreted by IE6/7. */
list-style-type: none;
counter-reset: level1;
}
ol li:before {
content: counter(level1) ". ";
counter-increment: level1;
}
ol li ol {
list-style-type: none;
counter-reset: level2;
}
ol li ol li:before {
content: counter(level1) "." counter(level2) " ";
counter-increment: level2;
}
ol li span { /* For IE6/7. */
margin: 0 5px 0 -25px;
}
</style>
</head>
<body>
<ol>
<li>first</li>
<li>second
<ol>
<li>second nested first element</li>
<li>second nested second element</li>
<li>second nested third element</li>
</ol>
</li>
<li>third</li>
<li>fourth</li>
</ol>
</body>
</html>
解決方案2
33 2011-09-14 19:30:22
我知道回復已經很晚了，但我剛剛找到了一個使用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>
HTH
解決方案3
8 2014-10-07 19:28:00
此頁面上的所有解決方案都不能正確且普遍地適用於所有級別和長（包裝）段落。 由於標記的大小可變（1.,1.2,1.10,1.10.5，......），實現一致的縮進非常棘手; 它不能只是“偽造”，即使每個可能的縮進級別都有預先計算的邊距/填充。
我終於找到了一個實際工作且不需要任何JavaScript的解決方案。
它在Firefox 32，Chromium 37，IE 9和Android Browser上進行了測試。 在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, ".") " ";
}
例：
解決方案4
0 2013-05-08 15:56:38
如果您在項目中使用sass / scss進行樣式設置，則可以使用mixin進行此操作。 要設置此嵌套列表的樣式，您只需要兩行sass代碼。
@import 'nested_list'
+nested_list('nested', 2)
<ol>
<li>first</li>
<li>second
<ol class="nested-2">
<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>
解決方案5
0 2010-04-28 13:54:07
這在純HTML / CSS中是不可能的。
請參閱BalusC的答案，以獲得開箱即用的優秀解決方案。 可在w3schools找到編號類型列表。
我能找到的最接近的選項是使用來自w3c的value屬性 ，但是使用以下標記
<ol>
<li value="30">
makes this list item number 30.
</li>
<li value="40">
makes this list item number 40.
</li>
<li>
makes this list item number 41.
</li>
<li value="2.1">
makes this list item number ...
</li>
<li value="2-1">
makes this list item number ...
</li>
</ol>
生成一個編號為30,40,41,2和2的列表。
正如約翰已經指出的那樣，在這種情況下，你最好的選擇就是編寫腳本。
解決方案6
0 2010-04-28 13:54:57
通過一些調整，您應該能夠調整此處使用的技術 （在第二個示例中）來創建順序列表。
將（未/有序）HTML列表顯示為自上而下的樹的最佳方法是什么？
[英]What's the best way to show (un/ordered) HTML lists as a top-down tree?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.