Cara mengatur list pada css

belajar css

Jenis-jenis list

Pada CSS Anda bisa mengatur list item dengan property: list-style-type, list-style-position, list-style-image dll. Didalam HTML, terdapat beberapa jenis list HTML yang sering digunakan:

  • Unordered list (<ul>) – list item ditandai dengan peluru
  • Ordered list (<ol>) – list item ditandai dengan nomor
  • Definition list (<dl>) – list item dengan deskripsi setiap list

Mengatur style list

Secara default, list dalam ordered list ditandai sebagai nomor ( 1, 2, 3 dll. ), sedangkan list dalam unordered list ditandai sebagai peluru. Namun, dengan property list-style-type Anda bisa mengatur atau mengganti penanda type listnya.

Kemungkinan nilai untuk property ini adalah: circle, square, upper-roman, lower-alpha dll.

Contoh:

Editor Online
  1. ul#circle {
  2. list-style-type: circle;
  3. }
  4. ul#square {
  5. list-style-type: square;
  6. }
  7. ol#upper-roman {
  8. list-style-type: upper-roman;
  9. }
  10. ol#lower-alpha {
  11. list-style-type: lower-alpha;
  12. }

Anda bisa menggunakan property list-style-type untuk menghapus angka atau peluru bawaan <ol> atau <ul>.

Contoh:

Editor Online
  1. ul#remove {
  2. list-style-type: none;
  3. margin: 0;
  4. padding: 0;
  5. }

Perhatikan bahwa list juga memiliki margin dan padding default. Untuk menghapusnya gunakan margin:0 dan padding:0 ke <ul> atau <ol>.

Mengatur posisi list

Anda bisa mengatur posisi list dengan property list-style-position, dengan property ini Anda bisa mengatur posisi apakah akan muncul didalam atau diluar kotak blok utama item.

Kemungkinan nilai untuk property ini adalah: inside atau outside. Secara default posisi list adalah outside.

List-style-position: outside; berarti bahwa poin-poin akan berada diluar item list. Ini adalah default:

  • Item 1
  • Item 2
  • Item 3

List-style-position: inside; berarti bahwa poin-poin akan berada didalam list item. 

  • Item 1
  • Item 2
  • Item 3

Contoh:

Editor Online
  1. ul#outside {
  2. list-style-position: outside;
  3. }
  4. ul#inside {
  5. list-style-position: inside;
  6. }
  7. li {
  8. background-color: lightgrey;
  9. }

Mengatur penanda dengan gambar

Pada contoh diatas Anda bisa mengatur penanda dengan property list-style-type, Kabar baiknya Anda bisa mengatur penanda menggunakan gambar dengan property list-style-image.

Contoh:

Editor Online
  1. ul li {
  2. list-style-image: url(“https://hendky.com/editor/gambar/bendera.png”);
  3. }

Isi url dengan alamat gambar yang akan ditentukan

List shorthand

Dengan list shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua property list dalam satu property tunggal. Untuk menggunakan list shorthand Anda cukup menggunakan property list-style. Dengan begitu Anda tidak lagi menulis kode yang panjang.

Contoh:

Editor Online
  1. ul {
  2. list-style: square inside url(“https://hendky.com/editor/gambar/bendera.png”);
  3. }

Bila menggunakan property steno, urutan nilai property adalah:

  • list-style-type 
  • list-style-position 
  • list-style-image 

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

Daftar property lists

PropertyKegunaanya
list-styleMengatur semua property list-style dalam satu deklarasi
list-style-imageMenentukan gambar sebagai penanda item list
list-style-positionMenentukan posisi untuk blok list item
list-style-typeMenentukan jenis penanda list item

Leave a Reply

Your email address will not be published. Required fields are marked *