html - HTML - テキストと画像の間の改行しないスペース

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 仕様に達しませんでしたが、これは動作を妨げるものではありません。仕様に準拠する必要がある場合は、代わりに扱いにくい 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; }

詳細はこちら