我有一个使用十进制列表样式的OL:
ol li {
list-style-type: decimal;
}
<ol>
<li>First</li>
<li>Second</li>
</ol>
Run Code Online (Sandbox Code Playgroud)
编号工作正常,但是如何删除句点?而不是显示:
1. First
2. Second
Run Code Online (Sandbox Code Playgroud)
我想展示:
1 First
2 Second
Run Code Online (Sandbox Code Playgroud)
您需要使用自定义计数器和生成的内容。没有list-style-type允许该格式的预定义。
ol {
counter-reset: list;
list-style: none;
}
li {
counter-increment: list;
position: relative;
}
li:before {
content: counter(list);
margin-right: 5px;
position: absolute;
right: 100%;
}Run Code Online (Sandbox Code Playgroud)
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>Run Code Online (Sandbox Code Playgroud)