Question

所以我有一个菜单，其中每个（多行）项目在菜单项的最后一个单词后面都有一个图像rightarrow.png。问题是有时候这个箭头会自动进入换行符，我想阻止它发生。我试过了

Blah blah&nbsp;<img src="rightarrow.png" />

但在某些情况下它看起来像

Blah blah
>

这让我发疯了。

Answer 1

将所有文本放在元素中，然后将图像放入另一个包装器中。将white-space:nowrap添加到其父级。

Answer 2

这是适用于浏览情况的方法：

Blah <nobr>blah <img src="rightarrow.png" /></nobr>

由于一些奇怪的原因，nobr标记从未达到HTML规范，但这并不妨碍它的工作。如果您只需遵守规范，请改用clumsier CSS：

Blah <span style="white-space: nowrap">blah <img src="rightarrow.png" /></span>

Answer 3

检查BIN。我假设这是你需要的，我做了这个。

HTML

  <ul>
<li><p>Menu 1</p> <img src="http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png" align="right"/></li>
<li><p>Menu 2</p> <img src="http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png" align="right"/></li>
<li><p>Menu 3</p> <img src="http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png" align="right"/></li>
<li><p>Menu 4</p> <img src="http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png" align="right"/></li>
  </ul>

的CSS

ul{ list-style-type:none;}
ul li{ float:left; padding:10px; width:100px;}
img{ width:20px;height:20px; float:left;}
p{ float:left; margin:0px; }

查看here了解详情

Answer 4

向图片添加position: absolute;规则;如果您不向其添加左/右定位，它将显示为内联。

HTML - 文本和图像之间不间断的空间

4 个答案: