スポンサード リンク
list-style-positionプロパティ
リストマークの表示位置を指定できます使い方(書式)
セレクタ { list-style-position: 値; }
list-style-positionプロパティ
対応ブラウザ | |
適用できる要素 | リスト項目 ol要素 ul要素 li要素 displayの値がlist-itemになっている要素 |
子要素へのスタイルの継承 | する |
プロパティの値 | 説明 |
inside | リスト項目の要素の内側にリストマークを表示する |
outside | リスト項目の外にリストマークを表示する。初期値 |
実際の指定方法
.hoge { list-style-position: outside; /* リスト項目の要素の内側にリストマークを表示 */ list-style-type: square; /* リスト項目にリストマークを表示 */ border: solid 1px; /* わかりやすいように枠線を表示 */ }
.hoge2 { list-style-position: inside; /* リスト項目の要素の外側にリストマークを表示 */ list-style-type: square; /* リスト項目にリストマークを表示 */ border: solid 1px; /* わかりやすいように枠線を表示 */ }
html部分
<p>実際の表示</p> <ul class="hoge"> <li>リスト項目の表示位置</li> <li>list-style-position: outside;</li> <li>リスト項目の要素の内側にリストマークを表示</li> </ul> <ul class="hoge2"> <li>リスト項目の表示位置</li> <li>list-style-position: inside;</li> <li>リスト項目の要素の外側にリストマークを表示</li> </ul>
実際の表示