CSS List

  1. › 
  2. ›  › 
  3. CSS List

Memformat tampilan daftar - list.

Elemen list terdapat 2 macam yang paling umum digunakan :
1. Unordered List : <ul>
2. Ordered List : <ol>
Lihat elemen HTML list untuk lebih jelasnya.

Property elemen list

Unordered List

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
  • List item 1
  • List item 2
  • List item 3

Ordered List

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
  1. List item 1
  2. List item 2
  3. List item 3

Mengkustom penanda (marker) list.

CATATAN :
Penanda pada elemen list disebut marker.

Mengatur warna marker list

  1. List item 1
  2. List item 2
  3. List item 3
  • List item 1
  • List item 2
  • List item 3
<style>
ol li ::marker{color: blue}
ul li ::marker{color: blue}
</style>

Menghilangkan marker list

  1. List item 1
  2. List item 2
  3. List item 3
<style>
ol li{ list-style: none;}
</style>

Memberi latar belakang warna list

  1. List item 1
  2. List item 2
  3. List item 3
<style>
ol li {
  color: #fff;
  background-color: #333;
}
</style>

Mengatur jarak antar list

  1. List item 1
  2. List item 2
  3. List item 3
<style>
ol li { margin: 2px;}
</style>

Mengatur jarak teks list

  1. List item 1
  2. List item 2
  3. List item 3
<style>
ol li { padding: 5px 10px;}
</style>

Menyejajarkan list

  1. List item 1
  2. List item 2
  3. List item 3
<style>
ol li { 
  float:left;
  display:inline-block;
}
</style>

Komentar

Posting Komentar