Lzh on GitHub

list-style-position

用于控制列表项标记图片的工具。

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

类别样式
list-insidelist-style-position: inside;
list-outsidelist-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
<ul class="list-inside">
  <li>5 cups chopped Porcini mushrooms</li>
  </ul>
<ul class="list-outside">
  <li>5 cups chopped Porcini mushrooms</li>
  </ul>

响应式设计

在 list-style-position 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：

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

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