Nowrap элемента списка li

Есть следующий код :

<ul class="menu">

	<li class="liname">

		<a href="url">

			<span class="l"></span>

			<span class="r"></span>

			<span class="t"><div>Пункт меню</div></span>

		</a>

	</li>

Я выставлял для li white-space:nowrap для div <div>Пункт меню</div> выставлял inline-block

Все равно происходит перенос крайнего правого элемента на следующую строку

Что можно сделать, что-бы переноса крайнего правого элемента на следующую строку не происходило ?

Вы имеете ввиду span class="r" ?

mirekua, покажите рабочий пример, а то так ничего сказать нельзя, многое зависит от css.

Gia-WEB, нет. <li class="liname">

Цитата ("TitokR"):

покажите рабочий пример

Проблема в том, что стили задает javascript и верстку динамически изменяет JavaScript

Я просто в примере написал код, который получается в результате

По этой ссылке можно посмотреть код верхнего меню. - посилання
Там все хорошо работает. Во всех разрешениях
Но это только до того времени как в страницу не вставить еще какой-то div или другой элемент и верхнее меню начинает ехать

Можно нажать на любой пункт меню в IE и правый элемент свалится вниз

<a href="url">

          <span class="l"></span>

          <span class="r"></span>

          <span class="t"><div>Пункт меню</div></span>

       </a>

Вас не смущает, что джаваскрипт генерит кривой семантически отвратительный код?
Не проще переписать джаваскрипт?
Еще есть таой инструмент как FireBug. Смотрите в нем как изменяются стили когда вы нажимаете на пункт меню., что добавляется, что пропадает.
Отладку еще никто не отменял.

Цитата ("kriptograf"):

Еще есть таой инструмент как FireBug

В Хроме есть, что-то похожее. Вообще в последней версии для <ul class="menu"> точно задано white-space:nowrap,
а также и для li

Также я пробовал задавать и display:inline. Ничего не помогает. Последний пункт все равно переносится на следующую строку

mirekua,

вы издеваетесь наверное.

верстка ужасна. неважно чем она генерится, руками или скриптом. если я правильно понял вся суть этого маразма сводится к закругленным уголкам у элементов меню. и если это действительно так, то вы выбрали самое страшное и убогое решение.

Цитата ("madcoding"):

суть этого маразма сводится к закругленным уголкам у элементов меню

Суть маразма сводится к тому, что он универсален. И на его основе легко генерируются основы для любых меню

mirekua,

ну так ясное дело. списки вообще идеальный вариант для меню. вы пытаетесь использовать спрайт для этого, но он у вас банально неправильный. разделите картинку на правую, центральную и левую часть.

и зачем в ссылку совать три спана? достаточно просто по бокам ссылки сделать два плавающих и все. примерно таким образом:

<li>

   <span class="before"></span>

   <a>ссылка</a>

   <span class="after"></span>

</li>

Цитата ("mirekua"):

он универсален. И на его основе легко генерируются основы для любых меню

извините, но ваш миф пока рушится всеми мыслимыми способами.

Цитата ("madcoding"):

разделите картинку на правую, центральную и левую часть.

И что после этого пункты перестанут переноситься ? Ведь проблема только в переносе последнего пункта на новую строку
Можно ее решить очень просто. Сделать меню немного короче.

Но оно тогда занимает площадь чуть меньшую по ширине чем все остальное
А надо, что-б при любых разрешениях меню было точно до краев

Алгоритм, который это делает не сильно хитроумный тоже

Именно :
ширина пункта меню = Ширина клиентской области окна / к-во пунктов меню

В дальнейшем можно как и ширину каждого пункта делать равной - "ширина пункта меню"
А можно еще усложнить алгоритм в зависимости от ширины текста пункта меню

И в любом случае происходит перенос на другую строку крайнего пункта.

Если делать скажем "Ширина клиентской области окна" - 10 то этого не происходит.
Но проблема остается

mirekua,

проблема у вас в фиксированных отступах по краям. и не нужно играться с позишинами для спанов внутри ли. достаточно им обоим и ссылке присвоить float:left. и само собой отступы сделать динамическими. тогда оно будет отлично сжиматься по краям.

Цитата ("madcoding"):

достаточно им обоим и ссылке присвоить float:left

Но мне не надо ровнение по левому краю

На счет динамичных отступов интересно.

посилання

пример просто, но надеюсь суть станет ясна.

Цитата ("madcoding"):

надеюсь суть станет ясна.

Спасибо. Ясна. Но и я обнаружил например, что если не указывать px в отступах то проблема исчезает

И инлайны у меня не работали из-за того, что

<ul class="menu">

   <li class="liname">

      <a href="url">

         <span class="l"></span>

         <span class="r"></span>

         <span class="t"><div>Пункт меню</div></span>

      </a>

   </li>

Вот этот ul еще находился в div-е у которого было установлено display:block

Я вообще не понимаю зачем вы нагородили такую конструкцию. все ж гораздо проще.

и пользуйтесь емами вместо пикселей.

Самое интересное, что с емами едет тоже, а если задать просто цифру без указания едениц то нет :o