如何在 HTML 和 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中文網其他相關文章！