list-style-position

概要

list-style-position は、主要ブロックボックス (principal block box) 内のマーカーボックスの位置を設定する CSS プロパティです。このプロパティと、関連する他のプロパティを同時に指定するのに便利な list-style というプロパティも存在します。

構文

inside | outside

値

outside

マーカーボックスは主要ブロックボックスの外側に描画されます。

inside

マーカーボックスは主要ブロックボックスの最初のインラインボックスとなり、要素の内容はそれに続けて描画されます。

例

HTML

<ul class="one"> List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<ul class="two"> List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>
<ul class="three"> List 3
  <li>List Item 3-1</li>
  <li>List Item 3-2</li>
  <li>List Item 3-3</li>
  <li>List Item 3-4</li>
</ul>

CSS

.one {
  list-style:square inside;
}

.two {
  list-style-position: outside;
  list-style-type: circle;
}

.three {
  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
  list-style-position: inherit;
}

Result

仕様

ブラウザ実装状況

注意：list-style-position:inside の定義がされたリスト要素内に、初めにブロック要素が置かれた時の挙動は、ブラウザによって異なります。
Chrom と Safari はどちらもマーカーボックスと同じ行にこの要素を置きます。Firefox、Internet Explorer、Operaは次の行に置きます。この件についての詳しい情報は Mozilla Bug report や こちらの例 をご覧ください。

関連情報

• list-style 関連 CSS プロパティ: list-style、list-style-type、list-style-image