数字嵌套HTML中的有序列表
Joh*_*ohn 37 html css jquery html-lists
我有一个嵌套的有序列表.
<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.第二个嵌套的第三个元素
- 第三
- 第四
有办法做到这一点吗？
Bal*_*usC 35
这是一个适用于所有浏览器的示例.纯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认同)
- 如果我有超过2个级别,我该如何使它工作？说,有5个级别？ (2认同)
Ale*_*dre 33
我知道回复已经很晚了,但我刚刚找到了一个使用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
此页面上的所有解决方案都不能正确且普遍地适用于所有级别和长(包装)段落.由于标记的大小可变(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, ".") " ";
}
例:
| 归档时间： |
|
| 查看次数： |
24857 次 |
| 最近记录： |