Как уберечь встроенные элементы от упаковки?
У меня есть пункты меню, которые выглядят так
<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^
Если меню становится слишком широким для ширины браузера, оно переносится, чего я и хочу. Проблема в том, что иногда перед [промежутками] ставятся разрывы строк. Я только хочу, чтобы он прерывался между [li] s. Есть идеи?
Ответы 3
попробуйте использовать
white-space: nowrap;
в определении css вашего класса контекстного триггера.
Обновлено: я думаю, что patmortech правильный, но установка nowrap на span не работает, потому что нет содержимого «белого пространства». Также может быть, что прикрепление стиля к элементу LI также не работает, потому что браузер может разбить части, потому что span является вложенным элементом в li. Вы можете пересмотреть свой код, отбросить элемент SPAN и использовать css для элементов LI.
Вам нужно добавить следующее, чтобы ваш элемент списка не оборачивался (если поместить его в класс контекстного триггера, это просто предотвратит обертывание содержимого диапазона):
li { white-space:nowrap; }
Если вы разместите элементы <li>, вы должны получить желаемый эффект.