如何自定义有序列表编号？

自定义有序列表编号

问题：如何自定义有序列表以更改数字的对齐方式，修改数字后面的字符，并从数字切换为字母/罗马表示法？

左对齐数字：

要左对齐有序列表中的数字，请使用 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中文网其他相关文章！