Bagaimana untuk Membuat Senarai Tertib Tanpa Tempoh dalam HTML dan CSS?

Membuat Senarai Tertib tanpa Tempoh dalam HTML dan CSS

Walaupun andaian umum bahawa senarai tersusun dalam HTML mesti mempunyai noktah selepas nombor, ia adalah wajar untuk mencipta satu tanpanya.

Penyelesaian CSS

Daripada menggunakan pendekatan imej gaya senarai yang tidak semantik, anda boleh menghapuskan tempoh dengan 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>

Nota

Penyelesaian ini menggunakan pseudo-selector :before, yang mungkin tidak disokong dalam pelayar lama seperti IE6 dan IE7. Untuk penyemak imbas ini, anda boleh menambah peraturan tambahan yang menyasarkan hanya mereka untuk memaparkan gaya senarai biasa:

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

Atas ialah kandungan terperinci Bagaimana untuk Membuat Senarai Tertib Tanpa Tempoh dalam HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!