CSS Lists(列表)

列表屬性用于控制列表項標(biāo)記的顯示。

HTML列表的類型

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

• 無序列表 —項目列表，其中每個列表項目都用項目符號標(biāo)記。

• 有序列表 —項目列表，其中每個列表項目都標(biāo)有數(shù)字。

• 定義列表 -項目列表，其中包含每個項目的描述。

要了解有關(guān)列表的更多信息，請查看有關(guān)HTML列表的教程。

CSS樣式列表

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

• 控制標(biāo)記的形狀或外觀。

• 指定標(biāo)記的圖像，而不是項目符號點或數(shù)字。

• 設(shè)置標(biāo)記和列表中文本之間的距離。

• 指定標(biāo)記或項目符號將出現(xiàn)在包含無序列表或有序列表的框的內(nèi)部還是外部。

列表樣式類型

默認(rèn)情況下，有序列表中的項目用阿拉伯?dāng)?shù)字（1、2、3等）編號，而在無序列表中，項目用圓形項目符號標(biāo)記。但是，您可以使用該list-style-type屬性將此默認(rèn)列表標(biāo)記類型更改為任何其他類型，例如圓形，正方形，羅馬數(shù)字，拉丁字母等。

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

更改列表標(biāo)記的位置

默認(rèn)情況下，列表標(biāo)記位于列表項框的外部。但是，您可以使用該list-style-position屬性來指定標(biāo)記或項目符號點出現(xiàn)在列表項邊框的內(nèi)部還是外部。

此屬性采用值inside或outside，并且outside是默認(rèn)值。如果使用該值inside，則這些行將環(huán)繞在標(biāo)記下而不是縮進。

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

將圖像用作列表標(biāo)記

您也可以使用list-style-image屬性將圖像設(shè)置為列表標(biāo)記。

以下示例中的樣式規(guī)則為無序列表中的所有項目分配一個透明的PNG圖像“ arrow.png”作為列表標(biāo)記。

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

上面的示例并非在所有瀏覽器中都產(chǎn)生相同的輸出。Internet Explorer和Opera將顯示比Firefox，Chrome和Safari稍高的圖像標(biāo)記。

圖像標(biāo)記的跨瀏覽器解決方案

當(dāng)使用該list-style-image屬性將圖像用作項目符號時，項目符號無法在瀏覽器中準(zhǔn)確對齊文本。解決方法是，可以通過 background-image CSS屬性正確對齊項目符號圖像。首先，將列表設(shè)置為沒有項目符號。然后，為list元素定義一個非重復(fù)的背景圖像。

以下示例在所有瀏覽器中均等顯示圖像標(biāo)記：

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以及l(fā)ist-style-position在一個地方的清單。

此樣式規(guī)則將已排序列表項的列表標(biāo)記設(shè)置為大寫拉丁字母，這些字母出現(xiàn)在列表項的最前面：

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