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.