[CSS] リストマーカーをliタグの内側に表示する

リストマーカーは初期設定では以下のように、liタグの外側に表示されます。

リストマーカーをliタグの内側に表示させるには「list-style-position」を使用します。

【liタグに枠線を付けた例】

黄色の部分がliタグ領域です。

サンプルソース

ul{
  list-style-position:inside;
  padding-left:10px;
  border:1px solid #808080;
}

ul{

list-style-position:inside;

padding-left:10px;

border:1px solid #808080;

}

<ul>
  <li>いぬ</li>
  <li>ねこ</li>
  <li>うさぎ</li>
</ul>

<ul>

</ul>

【結果】

黒丸がliタグの内側に入りました。

list-style-positionには以下の値を設定できます。

【list-style-positionの値】

値	意味
outside	マーカーをリストの外側に表示する（デフォルト）
inside	マーカーをリストの内側に表示する