Элементы с Nowrap прилипают к соседним элементам в WebKit

У меня есть список ul, который я отображаю в виде горизонтального меню. Я бы хотел, чтобы содержимое каждого li оставалось на одной строке, а все элементы li при необходимости перепрыгивали строки. Что-то вроде:

First entry in the menu Second menu entry
These words are short, the LI jumps lines, but doesn't wrap
Yet anoter] [And more] [Some more]

По логике я бы просто поставил li {white-space:nowrap;}, но тут проблема с браузерами WebKit. Элементы с Nowrap прилипают к соседним элементам. Таким образом, в приведенном выше случае все li будут в одной строке.

То же самое касается изолированного элемента с nowrap внутри текстового блока переноса.

<p>Visit my sites <a href="http://gabrielradic.com/" style="white-space:nowrap">Gabriel Radic
.com (English)</a> or <a href="http://www.timbru.com/" style="white-space:nowrap">Timbru Blog
(Romanian)</a>.

Я ожидал бы что-то вроде:

Посетите мои сайты Gabriel Radic.com или
блог Timbru

Вместо этого две ссылки в конечном итоге слипаются, например:

Посетите мои сайты
Gabriel Radic.com или блог Timbru (на румынском языке)

Есть ли хороший способ сказать Safari, Chrome и другим, чтобы они перестали хватать людей за локти?

Спасибо за помощь.


html css nowrap
person Gabriel R.    schedule 06.03.2010    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вместо использования white-space:nowrap в этом случае лучше использовать display:inline-block.

CSS необходимо адаптировать здесь и там для изменения, но он работает так, как ожидалось.

person Gabriel R.    schedule 06.03.2010

arrow_upward
1
arrow_downward

Итак, если я правильно понимаю, вы хотите, чтобы текст внутри элементов списка переносился, но не само меню, верно? чтобы это выглядело примерно так:

item one | item two | item number | item four 
                         three

Но не выглядеть так:

item one | item two | item number three | 
item four

Если это так, пробовали ли вы установить nowrap для фактического ul вместо элементов списка, поскольку вы пытаетесь сделать так, чтобы ul не переносилось? Затем установите ширину для элементов списка, чтобы они соответствовали этой ширине.

person Anthony    schedule 06.03.2010
comment
На самом деле мне нужно, чтобы LI или As из моих примеров всегда находились на одной строке, но при необходимости весь элемент может перейти на другую строку. Я хочу, чтобы они вели себя как... (подождите)... встроенные блоки. Кажется, это ответ, который я искал :-) - person Gabriel R.; 06.03.2010