list-style-position

用于控制列表中项目符号和编号位置的工具类。

快速参考

类	属性
list-inside	list-style-position: inside;
list-outside	list-style-position: outside;

示例

基础示例

使用 list-inside 和 list-outside 等工具类来控制列表中标记的位置和文本缩进：

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

<!-- [!code classes:list-inside] -->
<ul class="list-inside">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

<!-- [!code classes:list-outside] -->
<ul class="list-outside">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

响应式设计

使用 md: 等断点变体前缀，即可让 list-style-position 工具类仅在中等及以上屏幕尺寸下生效：

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

在变体文档中了解更多关于使用变体的信息。