排版
list-style-type
用于控制列表标记样式的工具。
| 类 | 样式 |
|---|---|
list-disc | list-style-type: disc; |
list-decimal | list-style-type: decimal; |
list-none | list-style-type: none; |
list-(<custom-property>) | list-style-type: var(<custom-property>); |
list-[<value>] | list-style-type: <value>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用像 list-disc 和 list-decimal 这样的工具来控制列表中标记的样式：
¥Use utilities like list-disc and list-decimal to control the style of the markers in a list:
list-disc
- Now this is a story all about how, my life got flipped-turned upside down
- And I'd like to take a minute just sit right there
- I'll tell you how I became the prince of a town called Bel-Air
list-decimal
- Now this is a story all about how, my life got flipped-turned upside down
- And I'd like to take a minute just sit right there
- I'll tell you how I became the prince of a town called Bel-Air
list-none
- Now this is a story all about how, my life got flipped-turned upside down
- And I'd like to take a minute just sit right there
- I'll tell you how I became the prince of a town called Bel-Air
<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>使用自定义值(Using a custom value)
¥Using a custom value
使用 list-[<value>] 语法 根据完全自定义的值设置 marker：
<ol class="list-[upper-roman] ..."> <!-- ... --></ol>对于 CSS 变量，还可以使用 list-(<custom-property>) 语法：
<ol class="list-(--my-marker) ..."> <!-- ... --></ol>这只是简写，用于 list-[var(<custom-property>)] 它会自动为你添加 var() 函数。
响应式设计(Responsive design)
¥Responsive design
在 list-style-type 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<ul class="list-none md:list-disc ..."> <!-- ... --></ul>请参阅 变体文档 详细了解如何使用变体。