CoderTools Web site

CSS - Changing the list-style-position of HTML Lists

Description


list-style-position is a property specify where the bullet (list-item marker) appears. If the value is outside the bullet is placed beyond the left border of the list item, if inside then the bullet is placed at the beginning of the elements contents.

Note: this applies not just to <li> tags but also applies to all elements with a display value of list-item.

The default is outside.
    
    list-style-position: inside;
    list-style-position: outside;
    list-style-position: inherit;
    
See also: list-style-type, list-style-image, list-style-position.

Examples for list-style

Example 1:

The first example shows the default position of outside the left border of the list item:
  • test
  • test
  • test
  • test
    <style>
        #test li{  list-style-position: outside; border:1px solid gray; }
    </style>

    <ul id="test">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>

Example 2:

This time with a position of inside. Note the bullets inside the li elements.
  • test
  • test
  • test
  • test
    <style>
        #test2 {  list-style-position: inside; }
        #test2 li {  border: 1px solid gray; }
    </style>

    <ul id="test2">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>

Example 3:

This time with a alternating positions of inside.
  • test
  • test
  • test
  • test
    <style>
        #test2 {  list-style-position: inside; border: 1px solid gray;  }
        #test3 {  list-style-position: outside; border: 1px solid blue;  }
    </style>

    <ul>
        <li id="test2">test</li>
        <li id="test3">test</li>
        <li id="test2">test</li>
        <li id="test3">test</li>
    </ul>
HTML & CSS Editor with FTP / FTPS

Values for list-style


Name Values Description
list-style-position inside
outside
Specifies the positioning of the bullet. Inside for Default is outside.
list-style-type disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
Specifies the bullet style. Default is disc. If url is specified then this property is disregarded.
list-style-image url(URL)
none
Specifies a url of an image to use as the bullet. Default is none.


TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

3/27/2017 6:27:51 PM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP