CoderTools Web site

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


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:

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

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

12/16/2017 9:39:14 AM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP