Senarai-gaya - Trik CSS

Anonim

The list-styleharta adalah harta trengkas bahawa set nilai untuk tiga hartanah senarai yang berkaitan yang berbeza dalam satu pengisytiharan:

ul ( list-style: || || ; )

Berikut adalah contoh sintaks:

ul ( list-style: square outside none; )

Yang akan sama dengan versi longhand berikut:

ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )

Dalam singkatan, jika ada nilai yang dihilangkan, mereka akan kembali ke keadaan awal.

Nilai untuk list-style-type

The list-style-typeharta mentakrifkan jenis senarai dengan menetapkan kandungan setiap penanda, atau peluru, dalam senarai. Nilai kata kunci yang boleh diterima untuk list-style-typemerangkumi:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

MDN mempunyai senarai yang lebih lengkap. Nilai bukan kata kunci diperkenalkan di CSS3, dan mula melihat beberapa sokongan, seperti:

ul ( list-style-type: "→"; )

Demo berikut merangkumi sekumpulan senarai yang tidak tersusun untuk menunjukkan setiap nilai kata kunci:

The list-style-typeharta boleh digunakan untuk semua senarai, dan untuk apa-apa unsur yang dijangka display: list-item.

Warna penanda senarai akan menjadi warna elemen yang dikira (tetapkan melalui colorharta tanah).

Nilai untuk list-style-position

Yang list-style-positionmentakrifkan harta di mana untuk meletakkan penanda senarai, dan ia menerima salah satu daripada dua nilai: insideatau di luar. Ini ditunjukkan di bawah dengan paddingdikeluarkan dari senarai dan batas merah kiri ditambahkan:

Nilai untuk list-style-image

The list-style-imageharta menentukan sama ada penanda senarai tersebut akan ditetapkan dengan imej, dan menerima nilai "tiada" atau URL yang mata kepada imej:

ul ( list-style-image: url(images/bullet.png.webp); )

Lebih Banyak Demo

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi

IE6 / 7 tidak menyokong semua nilai kata kunci untuk list-style-typedan juga mempunyai pepijat di mana item senarai terapung tidak memaparkan penanda senarai mereka. Ini diselesaikan dengan menggunakan gambar latar (bukan list-style-image) pada item senarai.