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