How TO - 列表組
學習如何使用 CSS 將基本列表轉換為“列表組”。
列表組
- Adele
- 艾格尼絲 (Agnes)
- 比利 (Billy)
- 鮑勃 (Bob)
- 卡爾文 (Calvin)
- 克里斯蒂娜 (Christina)
- Cindy
如何建立列表組
步驟 1) 新增 HTML
示例
<ul>
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
步驟 2) 新增 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 列表教程，瞭解更多關於 HTML 列表以及如何設定其樣式。
