list-style-position

CSSプロパティ「list-style-position」の解説とサンプル。

リストの表示・回り込み形式を指定するプロパティ。

値により、マーク部分を外側に出しリストの内部を左揃えにしたり、マークを内側に表示させたりすることができる。

outside	マーク部分を外側に出し、リストの内部が左揃えになる。何も指定しない場合はこれが指定される。
inside	マーク部分が内側に入り、それを回り込む形でリストの内容が表示される。

[CSSの記述]

.sampleA { list-style-position:outside; }

[HTMLの記述]

<ul class="sampleA">
	<li>テキストテキストテキストテキスト<br />テキスト</li>
	<li>テキストテキストテキストテキスト<br />テキスト</li>
	<li>テキストテキストテキストテキスト<br />テキスト</li>
</ul>

[ブラウザ上の表示]

[CSSの記述]

.sampleB { list-style-position:inside; }

[HTMLの記述]

<ul class="sampleB">
	<li>テキストテキストテキストテキスト<br />テキスト</li>
	<li>テキストテキストテキストテキスト<br />テキスト</li>
	<li>テキストテキストテキストテキスト<br />テキスト</li>
</ul>

[ブラウザ上の表示]

CSSレイアウト実践講座カテゴリ