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

因此，我有一个菜单，其中每个（多行）项目在菜单项的最后一个单词后面都有一个图像rightarrow.png。问题是有时候这个箭头本身会进入换行符，我想阻止它发生。我试图HTML - 文字和图像之间的不间断空格

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

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

Blah blah 
>

它的驾驶我疯了。

来源

2012-12-11 L84

添加完成的代码 – user7282

您可能需要显示更多代码，特别是CSS。 JSFiddle将是理想的。 – greener

认真吗？我是否必须包含php错误日志才能彻底？来吧，我如何确保在任何情况下，在一个元素中的图像和文本之间永远不会有空隙，否则应该有空格。 – L84

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

来源

2012-12-11 06:11:38

单词之间会有空格吗？因为我只需要不成为图像和前面的单词之间的突破空间。 – L84

@ L84如果在文本容器上设置宽度，则空格将打破新行。 –

不，id不会中断，它全部在一行中 - 可能是因为空白：nowrap生效 – L84

检查此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更多细节

来源

2012-12-11 06:22:10

这是一个跨浏览情况的工作方法：

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

由于某种奇怪的原因，nobr标记从未达到过HTML规范，但这并不妨碍它的工作。如果你只需要符合规格，使用笨拙CSS来代替：

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

来源

2012-12-11 07:42:12

这应该是公认的答案 –

好的答案，但接受对于使用html模板的情况更好（例如，在呈现文本时替代文本）。希望，你有我的想法。 – Dmitry

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

来源

2017-01-12 18:59:56 mcrider

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

回答

相关问题