CSS 列表
無序列表
- 咖啡
- 茶
- 可口可樂
- 咖啡
- 茶
- 可口可樂
有序列表
- 咖啡
- 茶
- 可口可樂
- 咖啡
- 茶
- 可口可樂
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 屬性將影像指定為列表項標記
定位列表項標記
list-style-position 屬性指定列表項標記（專案符號）的位置。
"list-style-position: outside;" 意味著專案符號將位於列表項外部。每個列表項行的起始將垂直對齊。這是預設設定。
- 咖啡 - 用烘焙過的咖啡豆沖泡的飲品...
- 茶
- 可口可樂
"list-style-position: inside;" 意味著專案符號將位於列表項內部。由於它是列表項的一部分，它將成為文字的一部分，並將文字推到開頭。
- 咖啡 - 用烘焙過的咖啡豆沖泡的飲品...
- 茶
- 可口可樂
移除預設設定
list-style-type:none 屬性也可以用來移除標記/專案符號。請注意，列表也有預設的 margin 和 padding。要移除它們，請將 margin:0 和 padding:0 新增到 <ul> 或 <ol>。
列表 - 簡寫屬性
list-style 屬性是一個簡寫屬性。它用於在一個宣告中設定所有列表屬性。
使用簡寫屬性時，屬性值的順序是
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;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
結果
- 咖啡
- 茶
- 可口可樂
- 咖啡
- 茶
- 可口可樂
更多示例
帶有紅色左邊框的自定義列表
此示例演示如何建立帶有紅色左邊框的列表。
全寬度帶邊框列表
此示例演示如何建立沒有專案符號的帶邊框列表。
所有不同的列表項標記
此示例演示 CSS 中的所有不同列表項標記。
所有 CSS 列表屬性
| 屬性 | 描述 |
|---|---|
| list-style | 在一個宣告中設定列表的所有屬性 |
| list-style-image | 將影像指定為列表項標記 |
| list-style-position | 指定列表項標記（專案符號）的位置 |
| list-style-type | 指定列表項標記的型別 |
