Description:
The list-style-position property affects the placement of a marker in relation to the content of the list item.
Possible Values:
- inside : The marker is made an inline element at the beginning of the first line of the list item's content.
- outside : The marker is placed outside the box containing the list item's content.
Applies to:
All the elements with a display of list-item.
DOM Syntax:
| object.style.listStylePosition="inside"; |
Example:
Here is the example:
<ul style="list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:sqaure;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
|
This will produce following result:
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
|
|
