CSS List

The result will look like the example above that shows the three different bullet types (disc, circle and square).

list-style-type : ol

The list-style-type CSS property can also be used to style ol elements. Instead of bullets you can set what kind of numbering scheme the ol element is to use. The valid values for the list-style-type property for ol elements are:

• decimal
• decimal-leading-zero
• upper-alpha
• lower-alpha
• upper-roman
• lower-roman
• lower-greek

Here is a CSS rule setting the list-style-type to upper-alpha:

ol {
    list-style-type : upper-alpha;
}

These following lists show how the number scheme looks with the 6 different possible values.

1. decimal
2. decimal
3. decimal

1. decimal-leading-zero
2. decimal-leading-zero
3. decimal-leading-zero

1. upper-alpha
2. upper-alpha
3. upper-alpha

1. lower-alpha
2. lower-alpha
3. lower-alpha

1. upper-roman
2. upper-roman
3. upper-roman

1. lower-roman
2. lower-roman
3. lower-roman

1. upper-latin
2. upper-latin
3. upper-latin

1. lower-latin
2. lower-latin
3. lower-latin

1. lower-greek
2. lower-greek
3. lower-greek

list-style-position

The list-style-position CSS property is used to set the position of the bullet or numbers. The list-style-position CSS property can take one of 2 values:

• inside
• outside

Here is an example that sets the list-style-position to outside:

ul {
    list-style-position: outside;
}

Here are two unordered lists - one with the list-style-position set to inside and one set to outside.

• This text uses the value inside which is especially visible when the text for a list item spans more than one line. This text uses the value inside which is especially visible when the text for a list item spans more than one line.
• This text uses the value inside which is especially visible when the text for a list item spans more than one line. This text uses the value inside which is especially visible when the text for a list item spans more than one line.

• This text uses the value outside. This text uses the value outside. This text uses the value outside. This text uses the value outside.
• This text uses the value outside. This text uses the value outside. This text uses the value outside. This text uses the value outside.

Notice how the value inside renders the bullet as part of the list item text. When the list item text spans more than one line, the text wraps and starts under the bullet.

With the avlue outside the bullet is rendered separately from the text. The text wraps and starts under the text, not the bullet, when the text spans multiple lines.

padding

You can increase the distance between the bullet or number and the text for the corresponding list item by setting the padding CSS properties for the li elements. Here is an example:

<ul>
    <li style="padding-left: 20px">With padding</li>
    <li>Without padding</li>
</ul>

This example sets the padding-left to 20px. If the ul or ol element has the list-style-position set to outside (or omitted), then setting the padding-left property of the li element will increase the space between the bullet / number and the text. Here is how that looks on a live ul element:

• With padding
• Without padding

If, however, the ul or ol element has the list-style-position CSS property set to inside, then the padding will be applied before the bullet / number, because the bullet / number is considered rendered inside the li element. Padding set on the li element is then rendered to the left of the bullet. Here is how that looks on a live ul element:

• With padding
• Without padding

The padding CSS properties can also be used to set the distance between individual li elements. Here is an example:

<style>
    ul>li {
        padding-bottom: 20px;
    }
</style>

<ul>
    <li>Item one</li>
    <li>Item two</li>
</ul>

This example sets the bottom padding of each list item (li element) to 20px. Thus, there will be 20px of blank space below each li element.

Here is how that looks applied to a live ul element:

• Item one
• Item two

In some browsers you may have to use the margin CSS properties instead of the padding CSS properties to make distance between the li elements.

list-style-image

The list-style-image CSS property can set an image to be used as bullet inside ul elements, instead of the three built-in options (disc, circle, square). Here is a list-style-image example:

ul {
    list-style-image : url('/images/arrow-right.png');
}

Here is how a ul element looks like with that list-style-image value:

• One
• Two
• Three

Background Images on List Items

The list-style-image CSS property does not give you control over the positioning of the image used as bullet. However, if you set list-style-type to none, then the list will not have any bullets drawn by default. You can then set a background image on each list item and use that background image as bullet. Here is a list item (li) background image example:

ul>li {
    padding-left        : 25px;
    background-image    : url('/images/arrow-right.png');
    background-position : 5px 5px;
    background-repeat   : no-repeat;
}

Here is how a list would look with that CSS applied:

• One
• Two
• Three

You can read more about setting background images for HTML elements in my tutorial about setting background images in CSS.

display

You can use the display CSS property to change how lists are rendered. By setting display for li elements to inline, the list items will be rendered as a horizontal list instead of a vertical list. Here is a list display: inline example:

ul>li {
    display: inline;
}

Here is how the list looks when rendered:

• One
• Two
• Three

Notice how the list items "One", "Two" and "Three" are now rendered on the same horizontal line, instead of each item on its own line. Notice also that the bullets are not displayed. This is the default behaviour when the browser renders a list using display:inline on the li elements.

You can also use the inline-block value instead of inline. Then you can set the width and height of the li elements (display: inline normally disables control over the width and height of elements). Here is an example:

ul>li {
    display: inline-block;
}

Here is how the list looks when rendered with display: inline-block applied to its li elements:

• One
• Two
• Three

It looks quite similar to the display: inline, as expected, but gives you control over the width and height of the li items using the width and height CSS properties. Here is an example that sets the width of each li element to 100px:

ul>li {
    display: inline-block;
    width  : 100px;
}

Here is how the list would look when rendered:

• One
• Two
• Three

Notice how each list item now takes up 100px in the width.