Предотвращение переноса строк в макетах CSS

Question

Мой CSS-дизайнер создал дизайн, в котором два родных элемента ul выложены слева направо. Макет выполняется путем указания ширины тегов ul.

Он использует Firefox в Windows, где все выглядит хорошо. Я использую Firefox в OS X, где содержимое одного из тегов li содержит слишком много текста, поэтому оно переходит на другую строку. Дизайн был сделан с намерением, чтобы текст был в одной строке.

Необходимо сделать пару замечаний:

• Я хочу, чтобы теги ul двигались слева направо, а не сверху вниз
• Я хочу, чтобы решение было удобным для i18n (перевод строк не должен разбивать их на две строки)

Если это определено в пикселях, почему в OS X оно выглядит иначе, чем в Windows, даже в одном браузере?

Существует ли общее решение CSS, которое может предотвратить перенос строк или не дать странице выглядеть иначе в отношении переноса строк между OS X и Windows? Или это безнадежное дело?

Answer 1

Установка white-space: nowrap на ul с предотвратит перенос текста, пока не будет найден <br />.Насколько я понимаю, списки уже горизонтальны, но для полноты картины вы можете сделать это, сделав li элементов display: inline или display: inline-block.white-space: nowrap не будет работать для float элементов списка ed.

Ссылки:

• свойство CSS пробела
• межбраузерный дисплей: встроенный блок

Answer 2

Возможно, что настройка width: auto; для этих элементов тоже может исправить это.