1. 排版
  2. 列表样式位置

排版

list-style-position

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

ClassStyles
list-inside
list-style-position: inside;
list-outside
list-style-position: outside;

示例

基本示例

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

list-inside

  • 5 杯切碎的松茸
  • 1/2 杯橄榄油
  • 3 磅芹菜

list-outside

  • 5 杯切碎的松茸
  • 1/2 杯橄榄油
  • 3 磅芹菜
<ul class="list-inside">
<li>5 杯切碎的松茸</li>
<!-- ... -->
</ul>
<ul class="list-outside">
<li>5 杯切碎的松茸</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.