CSS 列表

無序列表：

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

有序列表：

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

HTML 列表和 CSS 列表屬性

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

  • 無序列表（<ul>）- 列表項用的是項目符號標記
  • 有序列表（<ol>）- 列表項用的是數字或字母標記

CSS 列表屬性使您可以：

  • 為有序列表設置不同的列表項標記
  • 為無序列表設置不同的列表項標記
  • 將圖像設置為列表項標記
  • 為列表和列表項添加背景色

不同的列表項目標記

list-style-type 屬性指定列表項標記的類型。

下例顯示了一些可用的列表項標記：

實例

ul.a {
  list-style-type: circle;
}
ul.b {
  list-style-type: square;
}
ol.c {
  list-style-type: upper-roman;
}
ol.d {
  list-style-type: lower-alpha;
}

親自試一試

注釋：有些值用于無序列表，而有些值用于有序列表。

圖像作為列表項標記

list-style-image 屬性將圖像指定為列表項標記：

實例

ul {
  list-style-image: url('sqpurple.gif');
}

親自試一試

定位列表項標記

list-style-position 屬性指定列表項標記（項目符號）的位置。

"list-style-position: outside;" 表示項目符號點將在列表項之外。列表項每行的開頭將垂直對齊。這是默認的：

  • Coffee - 用烘焙過的咖啡豆制成的沖泡飲料
  • Tea
  • Coca-cola

"list-style-position: inside;" 表示項目符號將在列表項內。由于它是列表項的一部分，因此它將成為文本的一部分，并在開頭推開文本：

  • Coffee - 用烘焙過的咖啡豆制成的沖泡飲料
  • Tea
  • Coca-cola

實例

ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}

親自試一試

刪除默認設置

list-style-type:none 屬性也可以用于刪除標記/項目符號。請注意，列表還擁有默認的外邊距和內邊距。要刪除此內容，請在 <ul> 或 <ol> 中添加 margin:0 和 padding:0 ：

實例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

親自試一試

列表 - 簡寫屬性

list-style 屬性是一種簡寫屬性。它用于在一條聲明中設置所有列表屬性：

實例

ul {
  list-style: square inside url("sqpurple.gif");
}

親自試一試

在使用簡寫屬性時，屬性值的順序為：

  • list-style-type（如果指定了 list-style-image，那么在由于某種原因而無法顯示圖像時，會顯示這個屬性的值）
  • list-style-position（指定列表項標記應顯示在內容流的內部還是外部）
  • list-style-image（將圖像指定為列表項標記）

如果缺少上述屬性值之一，則將插入缺失屬性的默認值（如果有）。

設置列表的顏色樣式

我們還可以使用顏色設置列表樣式，使它們看起來更有趣。

添加到 <ol> 或 <ul> 標記的任何樣式都會影響整個列表，而添加到 <li> 標記的屬性將影響各個列表項：

實例

ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}

結果：

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

親自試一試

更多實例

帶紅色左邊框的自定義列表
本例演示如何創建帶有紅色左邊框的列表。
全屏寬度的邊框列表
本例演示如何創建沒有項目符號的帶邊框列表。
列表的所有不同列表項標記
本例演示了 CSS 中所有不同的列表項標記。

所有 CSS 列表屬性

屬性 描述
list-style 簡寫屬性。在一條聲明中設置列表的所有屬性。
list-style-image 指定圖像作為列表項標記。
list-style-position 規定列表項標記（項目符號）的位置。
list-style-type 規定列表項標記的類型。