如何創建：列表組

學習如何使用 CSS 將基本列表轉換為“列表組”。

  • Adele
  • Agnes
  • Billy
  • Bob
  • Calvin
  • Christina
  • Cindy

親自試一試

如何創建列表組

第一步 - 添加 HTML：

<ul>
  <li>Adele</li>
  <li>Agnes</li>
  <li>Billy</li>
  <li>Bob</li>
  <li>Calvin</li>
  <li>Christina</li>
  <li>Cindy</li>
</ul>

第二步 - 添加 CSS：

ul {
  list-style-type: none; /* 移除項目符號 */
  padding: 0; /* 移除內邊距 */
  margin: 0; /* 移除外邊距 */
}
ul li {
  border: 1px solid #ddd; /* 為每個列表項添加細邊框 */
  margin-top: -1px; /* 防止雙邊框 */
  background-color: #f6f6f6; /* 添加灰色背景顏色 */
  padding: 12px; /* 添加一些內邊距 */
}

親自試一試

相關頁面

教程：CSS 列表