如何在 HTML 和 CSS 中创建没有句点的有序列表？-css教程-PHP中文网

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

Susan Sarandon

发布： 2024-11-03 09:04:03

原创

853 人浏览过

How to Create Ordered Lists Without a Period in HTML and CSS?

在 HTML 和 CSS 中创建不带句点的有序列表

尽管普遍假设 HTML 中的有序列表必须在数字后面有一个句点，但创建

CSS 解决方案

您可以使用 CSS 消除句点，而不是诉诸无语义的列表样式图像方法：

<code class="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;
}</code>

登录后复制

注意

此解决方案使用 :before 伪选择器，IE6 和 IE7 等旧版浏览器可能不支持该选择器。对于这些浏览器，您可以添加仅针对它们的附加规则以显示正常列表样式：

<code class="css">ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}</code>

登录后复制

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