list-style-position

例

基本的な例

リスト内のマーカーとテキストのインデントの位置を制御するには、list-insideやlist-outsideのようなユーティリティを使用します。

<ul class="list-inside">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>
<ul class="list-outside">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

レスポンシブデザイン

プレフィックスa list-style-position ユーティリティ ユーティリティを適用するブレークポイントバリアント（md:など）を使用します。medium 以上の画面サイズ

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

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。