Computer >> Máy Tính >  >> Lập trình >> CSS

Làm cách nào để chuyển một danh sách cơ bản thành một nhóm danh sách bằng CSS?


Để chuyển đổi danh sách cơ bản thành "nhóm danh sách" bằng CSS, mã như sau -

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;
   }
   ul li {
      border: 1px solid rgb(0, 0, 0);
      background-color: #f6f6f6;
      padding: 12px;
      font-size: 18px;
   }
</style>
</head>
<body>
<h1>List Group Example</h1>
<ul>
<li>Lion</li>
<li>Tiger</li>
<li>Leopard</li>
<li>Cheetah</li>
<li>Jaguar</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</body>
</html>

Đầu ra

Kết quả sau sẽ được tạo ra bởi đoạn mã trên -

Làm cách nào để chuyển một danh sách cơ bản thành một nhóm danh sách bằng CSS?