Menu
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 <img src="rightarrow.png" />
but still in some cases it looks like
Blah blah
>
It's driving me crazy.
379
HTML Non-Breaking Space ( ) The simplest way to add a space in HTML (besides hitting the spacebar) is with the non-breaking space entity, written as or  .
Usually, it is preferable to have a little space between the image and the surrounding text. In HTML, you provide this space by using the vspace and hspace attributes within the img element. In CSS, to align an element with no text wrap, apply the text-align property to a block-level element that contains the image.
Place your cursor where the nonbreaking space should be inserted. Alternately, if a regular space already appears where the nonbreaking space should be inserted, select the regular space (see figure 1). 2. Select Ctrl + Shift + Space on your keyboard to insert the nonbreaking space.
Put all your text in an element, then put the image in another wrapper. Add white-space:nowrap to their parent.
195
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>
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
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
