CSS 列表

用於控制列表項標記的表示的列表屬性。

HTML 列表的型別

HTML 中有三種不同型別的列表：

• 無序列表 - 專案列表，其中每個列表項都標有專案符號。
• 有序列表 - 專案列表，其中每個列表項都標有數字。
• 定義列表 - 專案列表，包含每個專案的描述。

要了解有關列表的更多資訊，請檢視 HTML 列表中的教程。

使用 CSS 設定列表

CSS 提供了幾種屬性，用於樣式化最常用的無序和有序列表。這些 CSS 列表屬性通常允許你：

• 控制標記的形狀或外觀。
• 指定標記的影象而不是專案符號或數字。
• 設定標記與列表中文字之間的距離。
• 指定標記或專案符號是顯示在包含無序列表項還是有序列表項的框內部或外部。

在下一節中，我們將討論可用於樣式列表的屬性。

列表樣式型別

預設情況下，有序列表中的專案用阿拉伯數字（1,2,3 等）編號，而在無序列表中，專案用圓形專案符號標記。但是，你可以使用 list-style-type 屬性將此預設列表標記型別更改為任何其他型別，如圓形、方形、羅馬數字、拉丁字母等。

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

改變列表標記的位置

預設情況下，列表標記位於列表項的框之外。但是，你可以使用 list-style-position 屬性指定標記或專案符號點是顯示在列表項的主要塊框內部還是外部。

此屬性取值 inside 或者 outside ，其中預設選項是 outside。

ul.in li {
    list-style-position: inside;
}
ul.out li {
    list-style-position: outside;
}

使用圖片作為列表標記

你還可以使用 list-style-image 屬性將影象設定為列表標記。

以下示例中的樣式規則將透明 PNG 影象 arrow.png 指定為無序列表中所有專案的列表標記。

ul li {
    list-style-image: url("arrow.png");
}

上面的示例並未在所有瀏覽器中生成相同的輸出。Internet Explorer 和 Opera 將顯示略高於 Firefox，Chrome 和 Safari 的影象標記。請參閱下文，瞭解此問題的跨瀏覽器解決方案。

影象標記的跨瀏覽器解決方案

使用 list-style-image 屬性將影象用作專案符號時，專案符號不會在瀏覽器中準確排列。解決方法是，你可以通過 background-image CSS 屬性正確對齊專案符號影象。首先，將列表設定為沒有專案符號。然後，為列表元素定義非重複的背景影象。

以下示例在所有瀏覽器中均等地顯示影象標記：

ul {
    list-style-type: none;
}
ul li {
    background-image: url("arrow.png");
    background-position: 0px 5px;    /* X-pos Y-pos (from top-left) */
    background-repeat: no-repeat;
    padding-left: 20px;
}

列表樣式的速記屬性

list-style 屬性是在一個地方定義列表的所有三個屬性的簡寫屬性 list-style-type ， list-style-image 以及 list-style-position。

此樣式規則將有序列表項的列表標記設定為出現在列表項主要塊框內的大寫拉丁字母：

ol {
    list-style: upper-latin inside;
}

注意： 使用速記屬性時，值的順序為： list-style-type | list-style-position | list-style-image 。如果其中一個值缺失，則無關緊要，只要其餘值按指定順序排列即可。