排版
list-style-position
用于控制列表中项目符号和数字位置的工具。
| 类 | 样式 |
|---|---|
list-inside | list-style-position: inside; |
list-outside | list-style-position: outside; |
示例(Examples)
基本示例(Basic example)
使用像 list-inside 和 list-outside 这样的工具来控制列表中标记的位置和文本缩进：
🌐 Use utilities like list-inside and list-outside to control the position of the markers and text indentation in a list:
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>响应式设计(Responsive design)
在 list-style-position 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<ul class="list-outside md:list-inside ..."> <!-- ... --></ul>请参阅 变体文档 详细了解如何使用变体。