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

Mencipta Senarai Tertib Tanpa Tempoh

Ramai pembangun mencari kaedah untuk mencipta senarai tersusun tanpa noktah tradisional atau aksara nombor berikutan setiap item. Walaupun sebelum ini dipercayai mustahil, HTML dan CSS kini menawarkan penyelesaian melalui pelaksanaan yang betul bagi jenis gaya senarai dan pemilih pseudo.

Penyelesaian CSS

Kepada hapuskan noktah, gunakan kod CSS berikut:

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

Dengan menetapkan 'jenis-gaya senarai' kepada 'tiada,' anda mengalih keluar bulet lalai atau aksara nombor. 'counter-increment' mencipta pembilang untuk setiap item senarai, dipaparkan dalam ':before' pseudo-selector. Sifat 'kandungan' menetapkan nilai pembilang sebagai kandungan item senarai. Anda boleh melaraskan sifat 'lebar' untuk mengawal lebar nombor.

Fallback untuk Penyemak Imbas Lama

Untuk pelayar Internet Explorer 6 dan 7, tambahkan CSS berikut untuk memulihkan gaya senarai lalai:

ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}

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