防止 div 中的换行符

Question

我有这个：

<style>
.out {width: 90px; overflow:auto;}
.con {}
.dst {}
img { margin-left: 3px; }
</style><body>
<div class='out'>
<div class='con'>
<div class='dst'>
blablabla bla<img >
</div></div></div>

我希望 dst div 的内容保持在一行上（在实际情况下宽度为 15%）。我希望它在 ie6、7 中工作，所以没有 "white-space:nowrap"。我知道有很多关于此的问题，但我没有找到解决方案。现在唯一的解决办法是：

.con { width: 300px; }

但是这样滚动条总是可见的，我只想在需要的时候看到它。谢谢

已编辑：现在img前没有space，只有边距，但仍然换行！

Answer 1

.out {width: 90px; overflow:auto;}
.con {}
.dst {}
.dst span{
  white-space:nowrap;
}
img { margin-left: 3px; }

<div class='out'>
  <div class='con'>
    <div class='dst'>
        <span>blablabla bla</span>
      <img >
    </div>
  </div>
</div>

您需要将文本包裹在 <span> 标签中才能在 IE6 & IE7.

中工作

这是一个Reference Link

这里是JSFiddle

PS ：对于并排的文本和图像，您可以 check this

希望对您有所帮助。

防止 div 中的换行符

prevent line breaks in div

html

line

break