CSS List 列表屬性 | 梧所不學

列表（List）是用來組織和呈現資訊的元素。本文將介紹 CSS 的列表相關屬性，幫助你控制列表的外觀，讓列表更符合設計的需求。

列表的基本類型

在 HTML 中，有兩種列表類型：

1. 無序列表：使用 <ul> 標籤，通常以圓點作為項目符號。
2. 有序列表：使用 <ol> 標籤，項目以數字或字母順序排列。

<ul>
  <li>項目一</li>
  <li>項目二</li>
  <li>項目三</li>
</ul>

<ol>
  <li>第一項</li>
  <li>第二項</li>
  <li>第三項</li>
</ol>

設定項目符號樣式

1. disc：實心圓點。
2. circle：空心圓點。
3. square：方形。
4. decimal：阿拉伯數字（1, 2, 3, ...）。
5. lower-alpha：小寫英文字母（a, b, c, ...）。
6. upper-alpha：大寫英文字母（A, B, C, ...）。
7. none：移除列表的項目符號

ul {
  list-style-type: square;
}

ol {
  list-style-type: upper-alpha;
}

使用圖片作為項目符號

如果你想使用自訂的圖片作為項目符號，可以使用 list-style-image。

ul {
  list-style-image: url('path/to/image.png');
}

控制項目符號的位置

list-style-position 決定項目符號相對於列表內容的位置，以下是可以設定的值：

1. outside：項目符號位於列表內容的左側，與內容分開顯示。（預設值）。
2. inside：項目符號與內容在同一縮排水平線上，若內容換行，換行部分會與項目符號對齊。

ul {
  list-style-position: inside;
}

使用縮寫屬性

list-style 是 list-style-type、 list-style-image 和 list-style-position 的簡寫屬性，可以一次設定多個值：

ul {
  list-style: square inside;
}

ol {
  list-style: upper-alpha outside;
}

結語

以上就是 CSS 的常用列表屬性，透過這些屬性，你就可以輕鬆調整列表的外觀了，希望這些內容有幫助到正在學習的你。