Typography
列表样式位置
用于控制列表项标记位置的工具类。
| Class | Styles |
|---|---|
list-inside | list-style-position: inside; |
list-outside | list-style-position: outside; |
示例
Inside
使用 list-inside 工具类将列表项标记放置在内容盒子内：
list-inside
- 5 cups chopped Porcini mushrooms
- 1/2 cup of olive oil
- 3lb of celery
list-outside
- 5 cups chopped Porcini mushrooms
- 1/2 cup of olive oil
- 3lb of celery
<ul class="list-inside"> <li>5 cups chopped Porcini mushrooms</li> <!-- ... --></ul><ul class="list-outside"> <li>5 cups chopped Porcini mushrooms</li> <!-- ... --></ul>响应式设计
Prefix a list-style-position utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<ul class="list-outside md:list-inside ..."> <!-- ... --></ul>Learn more about using variants in the variants documentation.
