как сохранить встроенные элементы от упаковки?

Question

У меня есть пункты меню, которые выглядят так

<ul>
  <li>Item1<span class="context-trigger"></span></li>
  <li>Item2<span class="context-trigger"></span></li>
  <li>Item3<span class="context-trigger"></span></li>
</ul>

с CSS, который превращает вышесказанное в горизонтальное меню, и JS, который превращает [пролеты] в кнопки, которые вызывают контекстные меню. Смутно так:

Item1^  Item2^  Item3^

Если меню становится слишком широким для ширины браузера, оно переносится, что я и хочу. Проблема в том, что иногда он ставит разрывы строки перед [spanами]. Я только хочу, чтобы это сломалось между [li] s. Есть идеи?

Answer 1

попробуйте использовать

white-space: nowrap;

в определении css вашего класса триггера контекста.

Редактировать: Я думаю, что patmortech является правильным, хотя, добавление nowrap в span не работает, потому что нет содержимого "белого пространства". Возможно также, что наложение стиля на элемент LI также не работает, потому что браузер может разбивать части, потому что span является вложенным элементом в li. Вы можете пересмотреть свой код, удалить элемент SPAN и использовать css для элементов LI.

Answer 2

Вам нужно поместить следующее, чтобы не допустить переноса элемента списка (помещение его в класс триггера контекста просто предотвратит перенос содержимого диапазона):

li { white-space:nowrap; }

Answer 3

Если вы плаваете <li> элементов, вы получите желаемый эффект.