Обтекание текста в тегах IE 7 <li>

Question

У меня есть горизонтальная строка меню, состоящая из <li> тегов, содержащих ссылки, поэтому пункт меню выглядит примерно так:

<li>
 <a href="...link...">
  <span>Some text</span>
 </a>
</li>

Выглядит хорошо, пока строка меню не станет шире экрана. Когда это происходит, и последний пункт меню содержит одно или несколько слов, второе слово этого элемента переносится прямо под полосой. Если экран сделан еще меньше, то он работает нормально, так как весь <li> просто переносится на строку ниже.

К тегам <li> применено несколько стилей CSS:

display:block;
padding:5px;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;

Я могу получить желаемое поведение целого <li> переноса на строку ниже, если я явно установлю ширину для элемента <li>. Однако я не хочу этого делать, так как они все разных размеров по дизайну.

Есть идеи?

Answer 1

Добавить white-space:nowrap;

li > a > span
{
    white-space:nowrap;
}

Это должно держать тексты элементов в одну строку.

Answer 2

Использование

li span {
    white-space: nowrap;
}

, а не дочерний селектор (li> a> span), поскольку дочерний селектор еще не поддерживается всеми браузерами.