List-style-position [ Css list property ]

list-style-position has 3 possible values,among this only two is all browser supported.

List-style-position[Possiible values]

CSS list-style-position has 3 possible values-

1. Outside
   
   • The marker stays outside of the content flow.Thus the bullets or markers stays on the left
     
     • This is Default
2. Inside
   
   • The marker stays inside with the content or text flow.Thus the bullets appears inside left.
3. Inherit
   
   • Style inherited from the parent element

List-style-position[Browser support]

• Support all major browsers- except Inherit values
• Note-Inherit value is not supported to any version of internet explorer

List-style-position [ Examples ]

List-style-position:inside; [ Unordered List ]

Code-1.1 html ~ unordered list

<ul class="my-list">
<li>html</li>
<li>css</li>>
<li>Javascript</li>
</ul>

Code-1.2 CSS ,

<style type="text/css">
.my-list ul
{
list-style-type:square;
}
.my-list li
{
border:1px solid green;
list-style-position:inside;
padding:2px 2px 2px 2px;
width:100px;
}
</style>

Output of Code-1 (html+css) in the browser

• html
• css
• Javascript

List-style-position:inside; [ Ordered List ]

Code-2.1 html ~ Ordered list

<ol class="my-list">
<li>html</li>
<li>css</li>>
<li>Javascript</li>
</ol>

Code-2.2 CSS ,

<style type="text/css">
.my-list ol
{
list-style-type:number;
}
.my-list li
{
border:1px solid green;
list-style-position:inside;
padding:2px 2px 2px 2px;
width:100px;
}
</style>

Output of Code-2 (html+css) in the browser

1. html
2. css
3. Javascript

List-style-position:outside; [ Unordered List ]

Code-3.1 html ~ unordered list

<ul class="my-list-two">
<li>html</li>
<li>css</li>>
<li>Javascript</li>
</ul>

Code-3.2 CSS ,

<style type="text/css">
.my-list-two ul
{
list-style-type:square;
}
.my-list-two li
{
border:1px solid green;
list-style-position:outside;
padding:2px 2px 2px 2px;
width:100px;
}
</style>

Output of Code-3 (html+css) in the browser

• html
• css
• Javascript

List-style-position:outside; [ Ordered List ]

Code-4.1 html ~ Ordered list

<ol class="my-list-two">
<li>html</li>
<li>css</li>>
<li>Javascript</li>
</ol>

Code-4.2 CSS ,

<style type="text/css">
.my-list-two ol
{
list-style-type:number;
}
.my-list-two li
{
border:1px solid green;
list-style-position:outside;
padding:2px 2px 2px 2px;
width:100px;
}
</style>

Output of Code-4 (html+css) in the browser

1. html
2. css
3. Javascript