时间戳

首页 > 解决方案 > 需要使用 CSS 为标题创建订单列表编号和字母编号

html - 需要使用 CSS 为标题创建订单列表编号和字母编号

问题描述

我想使用 CSS 为标题创建订单号和顺序字母。

h4.heading_numberlist{
    counter-increment: list-number;
    margin-top:12.0pt;
    margin-right:0in;
    margin-bottom:3.0pt;
    margin-left:0in;
    page-break-after:avoid;
    font-size:12.0pt;
    font-family:"Arial",sans-serif;
    color:black;
    font-weight:bold;
    
}
h4.heading_numberlist::before{
   content: counter(list-number, decimal) '. ';
}
<div class="topic nested3">
<h4 class="heading_numberlist">Services</h4>
</div>
<div class="topic nested3">
<h4 class="heading_numberlist">Tests</h4>
</div>
<div class="topic nested3">
<h4 class="heading_numberlist">Number</h4>
</div>

但它不起作用。预期输出为：

1. Services
2. Tests
3. Number

同时对于字母标题更改为

A. Services
B. Tests
C. Number

标签： htmlcss

解决方案

实际上，我想知道为什么您需要将 h4 用于有序列表。从 HTML 开始，已经为订单列表提供了语义标签。它支持您想要的任何类型的订单列表。

所以把它做成这样可能会更好

<!-- order list with alphabet -->
<ol type="A">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>

<!-- order list with number -->
<ol type="1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>

推荐阅读