list-style-position

示例(Examples)

¥Examples

基本示例(Basic example)

¥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:

<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)

¥Responsive design

在 list-style-position 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

<ul class="list-outside md:list-inside ...">
  <!-- ... -->
</ul>

请参阅 变体文档 详细了解如何使用变体。