Search code examples
imagealignment

CSS: Align image next to text in a list item?

I have a numbered list, like this:

<ol>
    <li>some text <img src="..." /></li>
</ol>

The image right of the text is below the text, not right of it. I tried a span and float:left, but this did not work. How could I align the image right of the text?

Thanks!

Solution

  • use floating for the text and the image and specify the width of the image and text divs for example 

    <ol>
 <li>
   <div style="float:left;width:200px;" >your text here..</div>
   <div style="float:right;width:100px;"><img src="abc.jpg" /></div>
   <div style="clear:both;"></div>
 </li>

    assume that your li width is minimum 300px