CSS - Changing the list-style-position of HTML Lists
Description
list-style-position is a property specify where the bullet (list-item marker) appears. If the value is outside the
bullet is placed beyond the left border of the list item, if inside then the bullet is placed at the beginning of the elements contents.
Note: this applies not just to <li> tags but also applies to all elements with a
display value of
list-item.
The default is
outside.
list-style-position: inside;
list-style-position: outside;
list-style-position: inherit;
See also: list-style-type, list-style-image, list-style-position.
Examples for list-style
Example 1:
The first example shows the default position of outside the left border of the list item:
<style>
#test li{ list-style-position: outside; border:1px solid gray; }
</style>
<ul id="test">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
Example 2:
This time with a position of inside. Note the bullets inside the li elements.
<style>
#test2 { list-style-position: inside; }
#test2 li { border: 1px solid gray; }
</style>
<ul id="test2">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
Example 3:
This time with a alternating positions of inside.
<style>
#test2 { list-style-position: inside; border: 1px solid gray; }
#test3 { list-style-position: outside; border: 1px solid blue; }
</style>
<ul>
<li id="test2">test</li>
<li id="test3">test</li>
<li id="test2">test</li>
<li id="test3">test</li>
</ul>
Values for list-style
| list-style-position |
inside
outside |
Specifies the positioning of the bullet. Inside for Default is outside. |
| list-style-type |
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none |
Specifies the bullet style. Default is disc. If url is specified then this property is disregarded. |
| list-style-image |
url(URL)
none |
Specifies a url of an image to use as the bullet. Default is none. |