CSS停止图像下的文字换行

Question

我有以下标记：

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

我想要它，以便如果文本自动换行，就不会进入图像的“列”。我知道我可以用table（我正在做的）做到这一点，但是由于这个原因这是行不通的。

我已经尝试了以下方法，但均未成功：

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

我也试过了float: right。

谢谢。

编辑：我希望它看起来像这样：

IMG   Text starts here and keeps going... and
      wrap starts here.

不是这样的：

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.

Answer 1

由于这个问题引起了广泛的关注，并且这是公认的答案，因此我认为需要添加以下免责声明：

该答案特定于OP的问题（示例中设置了宽度）。当它起作用时，它要求您在每个元素，图像和段落上都有一个宽度。除非您有此要求，否则我建议使用Joe将作为该问题的另一个答案发布。

该span元素是一个内联元素，您不能在CSS中更改其宽度。

您可以将以下CSS添加到您的跨度中，以便可以更改其宽度。

display: block;

通常更有意义的另一种方法是将<p>元素用作的父元素<span>。

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

由于<p>是一个block元素，因此您可以使用CSS设置其宽度，而无需进行任何更改。

但是在两种情况下，由于现在都有一个block元素，因此需要浮动图像，以使文本不会全部移到图像下方。

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

PS float:left也可以戴上图像，而不是在图像float:right上，li p但在这种情况下，还需要text- align:left正确地重新对齐文本。

PSS如果您继续第一个不添加<p>元素的解决方案，那么CSS应该如下所示：

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}