HTML - non-breaking space between text and image

Question

So I have a menu where each (multiline) item has an image rightarrow.png right after the last word of the menu item. The problem is sometimes this arrow goes into a newline by itself, and I want to stop that from happening. I tried

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

but still in some cases it looks like

Blah blah
>

It's driving me crazy.

Answer 1

Put all your text in an element, then put the image in another wrapper. Add white-space:nowrap to their parent.

Answer 2

This is the method that works across browsing situations:

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

The nobr tag never got to HTML specs, for some odd reason, but this does not prevent it from working. If you just have to comply with the specs, use clumsier CSS instead:

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

Answer 3

Check this BIN. I made this after assuming this is what you need.

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; }

Check here for more details