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

20

Мой дизайнер CSS сделал дизайн, в котором есть два брата, выложенных слева направо. Макет выполняется путем указания ширины тегов 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 ответа

43

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

Литература:

ответ дан Alex Gyoshev 04.08.2010 в 23:01
источник
1

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

    
ответ дан jolt 05.08.2010 в 01:37
источник