16

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

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

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

Blah blah
>

这让我疯狂。

4

4 回答 4

17

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

于 2012-12-11T06:11:38.420 回答
6

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

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

出于某种奇怪的原因，该nobr标签从未达到 HTML 规范，但这并不妨碍它工作。如果您只需要遵守规范，请改用 clumsier CSS：

Blah <span style="white-space: nowrap">blah <img src="rightarrow.png" /></span>
于 2012-12-11T07:42:12.517 回答
1

检查这个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; }

在这里查看更多详情

于 2012-12-11T06:22:10.710 回答
0

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

于 2017-01-12T18:59:56.303 回答