title: CSS display:inline property with list-style-image: property on <li> tags
body: <p>I'm having a problem using CSS's <code>display:inline</code> property with the <code>list-style-image:</code> property on <code>&lt;li&gt;</code> tags. Basically, I want to output the following:</p>
  
  <pre><code>* Link 1  * Link 2
  </code></pre>
  
  <p>where <code>*</code> represents an image.</p>
  
  <p>I'm doing this with the following bit of HTML:</p>
  
  <pre><code>&lt;ol class="widgets"&gt;
      &lt;li class="l1"&gt;Link 1&lt;/li&gt;
      &lt;li class="l2"&gt;Link 2&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>which is styled with the following bit of CSS:</p>
  
  <pre><code>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); }
  </code></pre>
  
  <p>The problem is that when the list items are displayed inline, the images associated with the list items do not appear. They <em>do</em> appear if I take out the <code>display:inline</code> property on the <code>&lt;li&gt;</code> tag.</p>
  
  <p>Is there a way to make the images appear even when the list items are displayed inline, or is that just impossible?</p>