CSS Property list-style-position
list-style-position property sets the position of the list marker with respect to the content of the list item.
Summary
| Item | Value |
|---|---|
| Initial value | outside |
| Inherited | Yes. |
| Version | CSS1 |
| JavaScript syntax | object.style.listStylePosition="inside" |
| Applies to | Elements whose display value is list-item. |
CSS Syntax
list-style-position: inside | outside | inherit
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| inside | The bullets stay inside the content flow |
| outside | The bullets stay outside the content flow. Default value. |
| inherit | Inherit the list-style-position property from the parent element |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
list-style-position |
Yes | Yes | Yes | Yes | Yes |
Example
An example showing how to use list-style-position CSS property.
<!DOCTYPE HTML>
<html>
<head>
<style>
ul {<!-- ww w . j a v a 2 s .c o m-->
font-family: sans-serif;
list-style-position: outside;
}
li {
border: thin solid lightgrey;
}
</style>
</head>
<body>
<ul>
<li>D</li>
<li>D</li>
<li>D</li>
</ul>
</body>
</html>Positioning the Marker
You can specify the position of the marker in relation to
the li element's content box using the list-style-position property.
The allowed values are inside and outside.
<!DOCTYPE HTML>
<html>
<head>
<style>
li.inside { <!--from w w w . j a v a2 s.c o m-->
list-style-position: inside;
}
li.outside {
list-style-position: outside;
}
li {
background-color: lightgray;
}
</style>
</head>
<body>
I like:
<ul>
These are the inside items:
<li class="inside">A</li>
<li class="inside">B</li>
<li class="inside">C</li>
These are the outside items:
<li class="outside">D</li>
<li class="outside">F</li>
<li class="outside">G</li>
</ul>
</body>
</html>