Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menyesuaikan Senarai Tertib dalam Firefox 3 (dan Lebih dari itu)?

Bagaimanakah Saya Boleh Menyesuaikan Senarai Tertib dalam Firefox 3 (dan Lebih dari itu)?

Linda Hamilton
Lepaskan: 2024-12-09 02:20:08
asal
584 orang telah melayarinya

How Can I Customize Ordered Lists in Firefox 3 (and Beyond)?

Menyesuaikan Senarai Tertib dalam Firefox 3

Nombor Senarai Menjajarkan Kiri

Untuk menjajarkan kiri nombor dalam senarai tersusun, anda boleh menggunakan CSS untuk mengatasi penggayaan lalai:

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}

li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}

li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}
Salin selepas log masuk

Menukar Aksara Selepas Senarai Nombor

Untuk menukar aksara selepas nombor senarai, ubah suai sifat kandungan dalam peraturan li::before:

li::before {
  ...
  content: counter(item) "a) ";
  ...
}
Salin selepas log masuk

Menukar kepada Senarai Abjad/Romawi

Untuk tukar daripada nombor kepada senarai abjad atau roman menggunakan CSS, gunakan gabungan set semula balas, fungsi pembilang() dan kandungan property:

ol {
  list-style-type: none;
  counter-reset: my-counter;
}

li {
  display: block;
  counter-increment: my-counter;
}

li::before {
  content: counters(my-counter, lower-alpha) ". ";
  ...
}
Salin selepas log masuk

Untuk angka Rom:

li::before {
  content: counters(my-counter, lower-roman) ". ";
  ...
}
Salin selepas log masuk

Perhatikan bahawa teknik ini mungkin tidak berfungsi dalam pelayar lama, termasuk Internet Explorer 7.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Senarai Tertib dalam Firefox 3 (dan Lebih dari itu)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan