[CSS] DIsplay : list-style;

Description

You can turn many html elements into list items using the display property. For example, you can use span, div and p tags as list items instead of the li tag.

        
     display: list-item;
    

See also: list-style, list-style-image, list-style-type, list-style-position.

Examples for display: list-item

Example 1:

Interestingly this example shows that any element can be a list item by specifying a display value of list-item.This example shows a div, span and p tag as list items and as such thelist-style-image property works with the span tag to show the image asthe bullet. The bullet is normally shown to the left of the elementbecause the default of list-style-position is outside so I have specified the value of inside this makes sure the list item appears within the main content area

item 1

item 2

item 3

The code:

    <style>
        #test1 {  display: list-item; list-style-image: url(images/bullet.gif); list-style-position: inside; }
    </style>

    <div id="test1">item 1</div>
    <span id="test1">item 2</span>
    <p id="test1">item 3</p>