CSS3

プロパティ

list-style-position

→●、mdn

リスト マーカーの位置決め。

このプロパティは、［::marker を行内に描画するか、リスト アイテム のすぐ外側に位置するか］を規定する。

inside

特別な効果はない（::marker は、リスト アイテムの内容の始端にある行内要素になる）。

<UL style="list-style-position:inside;
 border:1px solid red;
">UL要素
 <LI>LI要素<BR>あああ
 <LI>LI要素
</UL>

outside

<UL style="list-style-position:outside;
 border:1px solid red;
">UL要素
 <LI>LI要素<BR>あああ
 <LI>LI要素
</UL>

リスト アイテム はブロック コンテナ である場合： マーカー ボックスは、ブロック コンテナになり、ブロック ボックスを成す主要ボックス の外側に置かれる。しかしながら、浮動体に隣接するリスト アイテム マーカーの位置は、定義されない。CSS は、マーカー ボックスの［精確な所在／塗り順序］は指定しないが、［［marker-side プロパティが指示するボックス］の書字モード を利用して、ボックスの行内始端側に配置する］ことを要求する。マーカー ボックスは、主要ボックスのボーダーに固定され、主要ボックスの内容ともにスクロールすることはない。ユーザー エージェント は、当の要素の overflow が visible 以外ならば、マーカーを隠してもよい（この許容は、将来に変更され得る）。マーカー ボックスのサイズや内容は、［主要ボックスや その最初の行ボックス］の縦幅に影響したり、一部の事例では新たな行ボックスを作成させることもある ― この相互作用もまた、定義されない。

¶課題省く

リスト アイテムは行内ボックス である場合： この値は inside と等価になる。

例えば：

<style>
  ul.compact { list-style¶: inside; }
  ul         { list-style¶: outside; }
</style>
<ul class=compact>
  <li>一個目の "inside" リストアイテム
  <li>二個目の "inside" リストアイテム
</ul>
<hr>
<ul>
  <li>一個目の "outside" リストアイテム
  <li>二個目の "outside" リストアイテム
</ul>

上の例は、次のように整形されるであろう：

テスト