How To

Cara Membuat List Grup Pada Sebuah Website

Di bawah ini kita akan mempelajari cara mengubah daftar dasar menjadi “list grup” dengan CSS.

List Grup

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

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

ul li {
  border: 1px solid #ddd;
  margin-top: -1px; /* Mencegah border ganda */  background-color: #f6f6f6;
  padding: 12px;
}
</style>
</head>
<body>

<h2> Contoh List Group</h2>
<p>Mengubah list biasa menjadi list group:</p>

<ul>
  <li>Taeyon</li>
  <li>Sunny</li>
  <li>Hyoyeon</li>
  <li>Sooyoung</li>
  <li>Tiffany</li>
  <li>Seohyun</li>
  <li>Jessica</li>
  <li>Yuri</li>
  <li>Yoona</li>
</ul>

</body>
</html>

Cara Membuat List Grup

Langkah 1) Tambahkan HTML:
Contoh

<ul>
  <li>Taeyon</li>
  <li>Sunny</li>
  <li>Hyoyeon</li>
  <li>Sooyoung</li>
  <li>Tiffany</li>
  <li>Seohyun</li>
  <li>Jessica</li>
  <li>Yuri</li>
  <li>Yoona</li>
</ul>

Langkah 2) Tambahkan CSS:
Contoh

ul {
  list-style-type: none; /* Hapus bullets */  padding: 0; /* Hapus padding */  margin: 0; /* Hapus margins */}

ul li {
  border: 1px solid #ddd; /*Tambahkan garis tepi tipis ke setiap item daftar*/  margin-top: -1px; /* Mencegah border ganda */  background-color: #f6f6f6; /* Tambahkan warna latar belakang abu-abu */  padding: 12px; /* Tambahkan padding */}

Hanifah Nurbaeti

Share
Tags: CSSHow To