list-style-position: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The list-style-position property specifies where the list item marker is placed.

This property can apply to the UL, OL, and LI element.


ul {
list-style-position: outside;
}

ol {
list-style-position: inside;
}
Property Value Explanation
list-style-position outside the marker is placed outside the list item (default)
inside the marker is placed inside the list item

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

#example1 { list-style-position: outside; }
#example2 { list-style-position: inside; }

</style>

</head>
<body>

<ul id="example1">
<li>First list item<br>The marker is placed outside</li>
<li>Second list item<br>The marker is placed outside</li>
<li>Third list item<br>The marker is placed outside</li>
</ul>

<ul id="example2">
<li>First list item<br>The marker is placed inside</li>
<li>Second list item<br>The marker is placed inside</li>
<li>Third list item<br>The marker is placed inside</li>
</ul>

</body>
</html>
Output
  • First list item
    The marker is placed outside
  • Second list item
    The marker is placed outside
  • Third list item
    The marker is placed outside
  • First list item
    The marker is placed inside
  • Second list item
    The marker is placed inside
  • Third list item
    The marker is placed inside