如何自訂有序清單編號？

自訂有序清單編號

問題：如何自訂有序清單以更改數字的對齊方式，修改數字後面的字符，並從數字切換為字母/羅馬表示法？

左對齊數字：

要左對齊有序列表中的數字，請使用CSS，如下所示：

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

自訂編號字符：

要更改數字後的字符，請修改上面CSS 中的content 屬性。例如，將句點更改為“.)”：

content: counter(item) ".) ";

切換到字母/羅馬表示法：

從數字切換到字母/羅馬列表，使用ol 元素上的type 屬性：

• type="a"表示小寫字母符號
• type="A" 表示大寫字母符號
• type="i" 表示小寫羅馬符號
• type="I"表示大寫羅馬符號符號

相容性：

提供的CSS解決方案與Firefox 3、Google Chrome和Opera相容。不過，它在 IE7 中可能無法完全運作。

以上是如何自訂有序清單編號？的詳細內容。更多資訊請關注PHP中文網其他相關文章！