文字排版
list-style-type
控制清單標記樣式的工具類別。
| 類別 | 樣式 |
|---|---|
list-disc | list-style-type: disc; |
list-decimal | list-style-type: decimal; |
list-none | list-style-type: none; |
list-(<自訂屬性>) | list-style-type: var(<自訂屬性>); |
list-[<值>] | list-style-type: <值>; |
範例
基本範例
使用像是 list-disc 和 list-decimal 的工具類別來控制清單中標記的樣式
list-disc
- 這是一個關於我的人生如何被徹底翻轉的故事
- 我想要花一點時間，就坐在這裡
- 我會告訴你我如何成為貝爾艾爾鎮的王子
list-decimal
- 這是一個關於我的人生如何被徹底翻轉的故事
- 我想要花一點時間，就坐在這裡
- 我會告訴你我如何成為貝爾艾爾鎮的王子
list-none
- 這是一個關於我的人生如何被徹底翻轉的故事
- 我想要花一點時間，就坐在這裡
- 我會告訴你我如何成為貝爾艾爾鎮的王子
<ul class="list-disc"> <li>Now this is a story all about how, my life got flipped-turned upside down</li> <!-- ... --></ul><ol class="list-decimal"> <li>Now this is a story all about how, my life got flipped-turned upside down</li> <!-- ... --></ol><ul class="list-none"> <li>Now this is a story all about how, my life got flipped-turned upside down</li> <!-- ... --></ul>使用自訂值
使用 list-[<值>] 語法 設定標記基於完全自訂的值
<ol class="list-[upper-roman] ..."> <!-- ... --></ol>對於 CSS 變數，您也可以使用 list-(<自訂屬性>) 語法
<ol class="list-(--my-marker) ..."> <!-- ... --></ol>這只是 list-[var(<自訂屬性>)] 的簡寫，它會自動為您加入 var() 函式。
響應式設計
前綴將 list-style-type 工具類別 加上像是 md: 的斷點變體，只在中 螢幕尺寸及以上套用工具類別
<ul class="list-none md:list-disc ..."> <!-- ... --></ul>在變體文件中深入了解如何使用變體。
