<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-position property</title>
<style>
ul {
list-style-type: square;
}
ol {
list-style-type: upper-latin;
}
.one {
list-style-position: inside;
}
.two {
list-style-position: outside;
}
.three {
list-style-position: inside;
}
.four {
list-style-position: outside;
}
</style>
</head>
<body>
<code><b>Unordered list with inside position</b></code>
<ul class="one">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<br />
<code><b>Unordered list with outside position</b></code>
<ul class="two">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<br />
<code><b>Ordered list with inside position</b></code>
<ol class="three">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<br />
<code><b>Ordered list with outside position</b></code>
<ol class="four">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<br />
</body>
</html>
