list-style-position

list-style-positionプロパティは主要ブロックボックス(リストの内容を表示する部分)内のマーカー(行頭記号)の位置を指定します。

初期値
outside
適用対象
リスト項目要素li要素
継承
する
メディア
visual

list-style-positionプロパティの値

list-style-positionプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

outside
マーカーを主要ブロックボックスの外側に表示(初期値)
inside
マーカーを主要ブロックボックスの最内側に埋め込んで表示

"inside" を指定した場合、マーカー(行頭記号)はインラインボックスを形成する要素のように埋め込まれた形で表示され、マーカーの周辺に内容が回り込みます。

また、枠線(borderプロパティ)や背景(backgroundプロパティ)の設定もともなっている場合、"outside" が指定されるとリスト項目要素の枠線及び背景の外側にリスト内容が表示され、"inside" が指定されるとリスト項目要素の枠線及び背景の内側にリスト内容が表示されます。

list-style-positionプロパティの実装状況

IE
Firefox
Opera
Chrome
Safari
iOS
Android

サンプル

ul li         { border : 1px dotted orange ; padding : 3px 0 ; }
.outside { list-style-position : outside ; }
.inside    { list-style-position : inside ; }

サンプルのように枠線や背景を伴う場合、リスト項目要素の枠線及び背景の内側にリスト内容が表示されます。

Updated / Published