CSSリスト - リストマーカーの表示位置設定 | list-style-position

CSSリスト関連記事：
◇　リスト要素概要
◇　list-style-type　
◇　list-style-image
◇　list-style-position

list-style-position属性

CSSのlist-style-position属性は、上のリスト要素の先頭のマーカーの表示位置を指定します。

■　書き方
list-style-position: outside | inside;

■　値
◇　outside：　デフォルト。リスト要素の先頭のマーカーがリスト内容領域の外側に表示されます。
◇　inside：　リスト要素の先頭のマーカーがリスト内容領域の内側に表示されます。

■　指定例
ul {
    list-style-position: inside;
}

list-style-position属性の使用例

◇　デフォルト（指定しない）
<ul>
<li>リストてすと、あいうえおあいうえお</li>
<li>リストてすと、あいうえおあいうえお</li>
</ul>

表示：


◇　list-style-position: outside;
<ul style="list-style-position: outside;">
<li>リストてすと、あいうえおあいうえお</li>
<li>リストてすと、あいうえおあいうえお</li>
</ul>

表示：


◇　list-style-position: inside;
<ul style="list-style-position: inside;">
<li>リストてすと、あいうえおあいうえお</li>
<li>リストてすと、あいうえおあいうえお</li>
</ul>

表示：

Sponsored Link