CSS display:inline property with list-style-image: property on <li> tags

Question

I'm having a problem using CSS's display:inline property with the list-style-image: property on <li> tags. Basically, I want to output the following:

* Link 1  * Link 2

where * represents an image.

I'm doing this with the following bit of HTML:

<ol class="widgets">
    <li class="l1">Link 1</li>
    <li class="l2">Link 2</li>
</ol>

which is styled with the following bit of CSS:

ol.widgets { list-style-type:none; }

ol.widgets li { display:inline;
                margin-left:10px; }

ol.widgets li.l1 { list-style-image:url(image1.gif); }

ol.widgets li.l2 { list-style-image:url(image2.gif); }

The problem is that when the list items are displayed inline, the images associated with the list items do not appear. They do appear if I take out the display:inline property on the <li> tag.

Is there a way to make the images appear even when the list items are displayed inline, or is that just impossible?

Answer 1

try using float: left (or right) instead of display: inline - inline display replaces list-item display which is what adds the bullet points

Answer 2

You want the list items to line up next to each other, but not really be inline elements. So float them instead:

ol.widgets li { 
    float: left;
    margin-left: 10px;
}

Answer 3

If you look at the 'display' property in the CSS spec, you will see that 'list-item' is specifically a display type. When you set an item to "inline", you're replacing the default display type of list-item, and the marker is specifically a part of the list-item type.

The above answer suggests float, but I've tried that and it doesn't work (at least on Chrome). According to the spec, if you set your boxes to float left or right,"The 'display' is ignored, unless it has the value 'none'." I take this to mean that the default display type of 'list-item' is gone (taking the marker with it) as soon as you float the element.

Edit: Yeah, I guess I was wrong. See top entry. :)

Answer 4

I would suggest not to use list-style-image, as it behaves quite differently in different browsers, especially the image position

instead, you can use something like this

ol.widgets,
ol.widgets li { list-style: none; }
ol.widgets li { padding-left: 20px; backgroud: transparent ("image") no-repeat x y; }

it works in all browsers and would give you the identical result in different browsers.