Chuyển đổi danh sách cơ bản thành list group với CSS

List group là danh sách được định dạng đẹp mắt với viền, nền, padding - thường dùng trong Bootstrap. Dưới đây là cách tự tạo với CSS thuần:

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    * {
      box-sizing: border-box;
    }
    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      max-width: 400px;
    }
    ul li {
      border: 1px solid rgb(0, 0, 0);
      background-color: #f6f6f6;
      padding: 12px;
      font-size: 18px;
      border-top: none;
    }
    ul li:first-child {
      border-top: 1px solid rgb(0, 0, 0);
      border-radius: 8px 8px 0 0;
    }
    ul li:last-child {
      border-radius: 0 0 8px 8px;
    }
  </style>
</head>
<body>
  <h1>Ví dụ List Group</h1>
  <ul>
    <li>Sư tử</li>
    <li>Hổ</li>
    <li>Báo</li>
    <li>Guepardo</li>
    <li>Cáo</li>
    <li>Mèo</li>
    <li>Chó</li>
  </ul>
</body>
</html>

Kết quả

Danh sách các con mèo lớn hiển thị như một nhóm liền mạch với viền ngoài bo tròn, nền xám nhạt, mỗi mục có padding thoáng đãng.

Nâng cao

• Thêm :hover hiệu ứng đổi màu nền
• Sử dụng box-shadow cho hiệu ứng nâng
• Thêm badge số lượng bên phải với flexbox