3 回答

TA貢獻1821條經驗 獲得超6個贊
這是一個整潔的解決方案。(老實說,這讓我感到驚訝。)CSS有一個叫做counters的東西,您可以在其中設置每個標題的自動章節編號。進行一些修改可以為您提供以下內容;您需要自己整理填充等。
ol {
counter-reset: list;
}
ol > li {
list-style: none;
}
ol > li:before {
content: counter(list, lower-alpha) ") ";
counter-increment: list;
}
<span>custom list style type (v1):</span>
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>
適用于所有現代瀏覽器和IE9 +(可能是IE8,但可能有問題)。
更新:我添加了子選擇器,以防止嵌套列表采用父樣式。trejder在注釋中也很不錯,因為列表項的對齊方式也被弄亂了。456bereastreet上的文章提供了一個很好的解決方案,其中涉及絕對定位計數器。
ol {
counter-reset: list;
}
ol > li {
list-style: none;
position: relative;
}
ol > li:before {
counter-increment: list;
content: counter(list, lower-alpha) ") ";
position: absolute;
left: -1.4em;
}
<span>custom list style type (v2):</span>
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>
- 3 回答
- 0 關注
- 1076 瀏覽
相關問題推薦
添加回答
舉報