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.