CSS停止图像下的文本换行

发布于07月10日

我有以下标记:

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

我希望这样，如果文本换行，它就不会进入图像的"列".我知道我可以用table(我当时正在用)来做，但这对this reason不可行.

我已经try 了以下几种方法，但都没有成功:

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.

推荐答案

由于这个问题获得了很多意见，这是公认的答案，我觉得有必要添加以下免责声明:

此答案特定于OP的问题(具有示例中设置的宽度).当它工作时，它要求您在每个元素、图像和段落上都有一个宽度.除非这是您的要求，否则我建议您使用Joe Conlin's solution作为这个问题的另一个答案.

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设置它的宽度，而无需更改任何内容.

但是在这两种情况下，由于您现在都有一个挡路元素，所以您需要浮动图像，这样您的文本才不会全部位于图像下方.

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

附注:您也可以将float:right放在li p上，而不是float:left放在图像上，但在这种情况下，您还需要text-align:left才能正确地重新对齐文本.

附注:如果您继续使用第一个不添加<p>元素的解决方案，您的CSS应该如下所示:

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