HTML - неразрывное пространство между текстом и изображением

Итак, у меня есть меню, в котором каждый (многострочный) элемент имеет изображение rightarrow.png сразу после последнего слова элемента меню. Проблема в том, что иногда эта стрелка переходит в новую строку, и я хочу прекратить это. Я попробовал

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

но в некоторых случаях он выглядит как

Blah blah
>

Это сводит меня с ума.

Ответ 1

Поместите весь текст в элемент, затем поместите изображение в другую оболочку. Добавьте white-space:nowrap к родительскому объекту.

Ответ 2

Это метод, который работает в ситуациях просмотра:

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

Тег nobr никогда не получал спецификации HTML по какой-то нечетной причине, но это не мешает работе. Если вам просто нужно соблюдать спецификации, используйте вместо этого неудобный CSS:

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

Ответ 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; }

Подробнее о здесь для более подробной информации

Ответ 4

Добавить правило position: absolute; к изображению; Он будет отображаться так, как если бы он был встроен, если вы не добавили в него позиционирование влево/вправо.