Cara Membuat List Grup Pada Sebuah Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 17, 2021

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 */
}