CoderTools Web site

CSS Lists - Use many HTML Elements as List-Items using the Display Command.

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.
HTML & CSS Editor with FTP / FTPS

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 the list-style-image property works with the span tag to show the image as the bullet. The bullet is normally shown to the left of the element because 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>
    



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).

8/19/2017 3:47:31 PM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP