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

22

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

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

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

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

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

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

    
задан hekevintran 04.08.2010 в 22:50
источник
  • Похоже на то, что у дизайнера есть некоторая работа, чтобы сделать кросс-браузерный дизайн. –  Kwebble 04.08.2010 в 23:05
  • Я бы предложил оставить оставшиеся элементы <li> и, возможно, опубликовать некоторый код или ссылку на проект, чтобы мы могли видеть, с чем вы имеете дело? –  Hristo 05.08.2010 в 06:55

2 ответа

45

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

Литература:

ответ дан Alex Gyoshev 04.08.2010 в 23:01
1

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

    
ответ дан jolt 05.08.2010 в 01:37