Question

使用HTML和CSS，我能实现这个目标吗？

1.
1.1
1.2
2.
2.1
2.2

使用<li>和<ul>代码？

Answer 1

对于符合CSS的浏览器，您可以使用：

ul { counter-reset:item; }
ul > li { counter-increment:item; }
ul > li:before {content: counter(item); }

ul > li > ul { counter-reset:subitem; }
ul > li > ul > li { counter-increment:subitem; }
ul > li > ul > li:before { content: counter(item) "." counter(subitem); }

Answer 2

没有跨浏览器的方式。

您可以实现的最好的是嵌套有序列表：

<ol>
    <li>Item 1
        <ol>
            <li>Subitem 1</li>
        </ol>
    </li>
</ol>

然后将每个嵌套列表设置为不同的类型：

ol {
    list-style-type: upper-roman;
}
ol ol {
    list-style-type: decimal;
}

希望这有帮助！

Answer 3

是的，可以使用CSS Counters完成此操作。但是，它并不适用于所有浏览器。

Answer 4

考虑使用DL / DT / DD而不是OL / UL并对DT中的值进行硬编码。

Answer 5

CSS 2.1提供了用户可定义的计数器，可用于计算元素。结合：before和：after伪类，您可以输出计数器值以创建自动编号的标题。

不幸的是，至少Internet Explorer不支持任何此类操作，即使在最新版本中也是如此。但至少Firefox确实支持它，所以如果您只是想将它添加为不会使您的网站无法使用的增强功能，那么您仍然可以使用它。

Answer 6

http://www.w3.org/TR/CSS2/generate.html

但是，是的，这仅适用于现代浏览器。嵌套的OL可能是要走的路。

Answer 7

一行javascript就可以做到这一点。用于目录：

<td class="session">
<script>
{document.getElementsByClassName("session")[num].innerHTML = "1." + (++num);}
</script>
</td>

num 是在上游适当位置初始化为零的文档中的全局变量。以上在第一次产生1.1。更改为 num ++ 并获得1.0。

Answer 8

HTML代码：

<ul>
  <li>1  </li>          
  <li>1.1</li>    
  <li>1.2</li>      
  <li>2  </li>                  
  <li>2.1</li>  
  <li>2.2</li>  
</ul>

css代码：

li  {   list-style:none; }

如何在有序列表中实现十进制编号？

8 个答案: