CSS Lists

Dalam HTML, ada dua jenis daftar:

daftar unordered (<ul>) - daftar item ditandai dengan peluru
daftar memerintahkan (<ol>) - daftar item ditandai dengan angka atau huruf

Dengan CSS, daftar bisa ditata lebih lanjut, dan gambar dapat digunakan sebagai penanda item daftar.

Different List Item Markers

Jenis item daftar penanda ditetapkan dengan properti list-style-type:

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}

Beberapa nilai-nilai untuk daftar unordered, dan beberapa untuk daftar memerintahkan.

An Image as The List Item Marker

Image sebagai The List Item Marker

ul {
   list-style-image: url('sqpurple.gif');
}

Contoh di atas tidak menampilkan sama di semua browser. IE dan Opera akan menampilkan gambar-penanda sedikit lebih tinggi dari Firefox, Chrome, dan Safari.

Jika Anda ingin gambar-penanda untuk ditempatkan sama di semua browser, solusi crossbrowser dijelaskan di bawah ini.

Crossbrowser Solution

Contoh berikut menampilkan gambar-penanda sama di semua browser:

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li {
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px center; 
    padding-left: 15px; 
}

Contoh menjelaskan:

Untuk <ul>:

Mengatur gaya-jenis daftar untuk tidak menghapus penanda item daftar

Set kedua padding dan margin 0px (untuk kompatibilitas cross-browser)

Untuk semua <li> di <ul>:

Mengatur URL gambar, dan menunjukkan itu hanya sekali (no-repeat)

Posisi gambar di mana Anda inginkan (0px kiri dan nilai vertikal: pusat)

Posisikan teks dalam daftar dengan padding-kiri

List - Shorthand property

Properti list-style adalah properti steno. Hal ini digunakan untuk mengatur semua properti dalam satu daftar deklarasi:

ul {
    list-style: square inside url("sqpurple.gif");
}

Bila menggunakan properti singkatan, urutan nilai properti adalah:

list-style-type (jika list-style-image yang ditentukan, nilai properti ini akan ditampilkan jika gambar untuk beberapa alasan tidak dapat ditampilkan)

list-style-position (menentukan apakah penanda daftar-item akan muncul di dalam atau di luar aliran konten)

list-style-image (menentukan gambar sebagai penanda daftar item)

Jika salah satu dari nilai properti di atas yang hilang, nilai default untuk properti yang hilang akan dimasukkan, jika ada.