list-style-position
Specifies the position of the marker for li elements (and elements with 'display' set to 'list-item' or 'inline-list-item').
Sample Code
li.test { list-style-position: outside;}
li.test1 { list-style-position: inside;}
Available Values
| Value | Description |
|---|---|
| outside | The marker is rendered outside the element's content area. This is the initial value. |
| inside | The marker is rendered inside the element's content area, as the first inline box of the element. |
Browser Display Result
<ul style="list-style-position: outside; list-style-type: disc;"> <li>This is a li element.</li> <li>This is a li element.</li> <li>This is a li element.</li> <li>This is a li element.</li> <li>This is a li element.</li> </ul>
<ul style="list-style-position: inside; list-style-type: disc;"> <li>This is a li element.</li> <li>This is a li element.</li> <li>This is a li element.</li> <li>This is a li element.</li> <li>This is a li element.</li> </ul>
Browser Compatibility
Desktop
Chrome1+ ○
Firefox1+ ○
Safari1+ ○
Edge12+ ○Supported in all versions
IE11 ○10 ○9 ○
8 ○7 ○
6 ○
Opera3.5+ ○
2 and earlier ×Mobile
iOS Safari1+ ○
Android Browser4.4+ ○3 and earlier × Chrome AndroidLatest ○Same support as desktop
Firefox AndroidLatest ○Same support as desktop
※ Version data is based on MDN.
Details
Specifies the position of the marker for li elements (and elements with 'display' set to 'list-item' or 'inline-list-item').
When the value is 'inside', the marker is rendered as the first inline box of the element, so it flows with the text.
<ul style="list-style-position: inside; list-style-type: disc;"> <li>This is a li element.</li> <li>This is a li element.</li> <li>This is a li element.</li> <li>This is a li element.</li> <li>This is a li element.</li> </ul>
If you find any errors or copyright issues, please contact us.
シェアする