Bagaimana untuk mengalih keluar Tempoh daripada Senarai Tertib dalam HTML dan CSS?

Menyesuaikan Senarai Tertib dalam HTML dan CSS

Senarai tersusun ialah alat yang berharga untuk menyampaikan maklumat secara berurutan. Walau bagaimanapun, penggayaan lalai selalunya termasuk tempoh selepas setiap nombor, yang mungkin tidak selalu diingini. Artikel ini meneroka cara untuk menyesuaikan senarai tersusun dan mengalih keluar pemisah tempoh.

Mencipta Senarai Tertib Tanpa Tempoh

Secara tradisinya, mengalih keluar tempoh daripada senarai tersusun yang diperlukan untuk mencipta kelas tersuai untuk setiap nombor dan menggunakan sifat imej gaya senarai. Walau bagaimanapun, penyelesaian CSS sahaja wujud yang elegan dan semantik:

<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>

Penyelesaian ini menggunakan pembilang CSS dan elemen pseudo :before untuk menjana penomboran tersuai. Sifat jenis gaya senarai ditetapkan kepada tiada untuk mengalih keluar titik tumpu atau nombor lalai. Sifat set semula balas memastikan bahawa kaunter bermula dari 1.

Keserasian Penyemak Imbas

Adalah penting untuk ambil perhatian bahawa penyelesaian ini bergantung pada :before pseudo-selector, yang tidak disokong oleh IE6 dan IE7. Untuk penyemak imbas ini, peraturan CSS tambahan boleh ditambah:

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

Peraturan ini mengatasi penggayaan tersuai dan memastikan IE6 dan IE7 memaparkan senarai bernombor lalai.

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