Positioning the Marker
Description
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 (the marker is inside the content box) and outside (the marker is outside the content box).
Example
The following code shows the list-style-position property and its values in use.
<!DOCTYPE HTML>
<html>
<head>
<style>
li.inside {<!-- w ww .j a v a 2s. co m-->
list-style-position: inside;
}
li.outside {
list-style-position: outside;
}
li {
background-color: lightgray;
}
</style>
</head>
<body>
<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">E</li>
<li class="outside">F</li>
</ul>
</body>
</html>