CSS：将图像与列表项中的文本对齐？

【问题标题】：CSS: Align image next to text in a list item?CSS：将图像与列表项中的文本对齐？
【发布时间】：2012-10-01 16:59:27
【问题描述】：

我有一个编号列表，如下所示：

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

文字的图片右边是文字的下方，而不是文字的右边。我尝试了跨度和浮动：左，但这不起作用。如何将文本的图像右对齐？

谢谢！

【问题讨论】：

没有问题，看这个：jsfiddle.net/s4LCA

标签： image alignment

【解决方案1】：

对文本和图像使用浮动，并指定图像和文本 div 的宽度，例如

<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>

假设你的 li 宽度最小为 300px

【讨论】：