如何在 HTML 和 CSS 中创建没有句点的有序列表？

创建不带句点的有序列表

许多开发人员寻求方法来创建每个项目后面不带传统句点或数字字符的有序列表。虽然以前被认为是不可能的，但 HTML 和 CSS 现在通过正确实现列表样式类型和伪选择器提供了解决方案。

CSS 解决方案

到消除句点，使用以下 CSS 代码：

ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}

通过将 'list-style-type' 设置为 'none'，您可以删除默认的项目符号或数字字符。 'counter-increment' 为每个列表项创建一个计数器，显示在 ':before' 伪选择器中。 'content' 属性将计数器值设置为列表项的内容。您可以调整 'width' 属性来控制数字宽度。

旧版浏览器的回退

对于 Internet Explorer 6 和 7 浏览器，添加以下 CSS 来恢复默认列表样式：

ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}

以上是如何在 HTML 和 CSS 中创建没有句点的有序列表？的详细内容。更多信息请关注PHP中文网其他相关文章！