Les éléments avec nowrap restent bloqués à des éléments adjacents dans WebKit
Question
J'ai une liste de ul
que j'afficher un menu horizontal. Je voudrais que le contenu de chaque li
de rester sur une ligne, mais les articles entiers de li
de sauter des lignes si nécessaire. Quelque chose comme:
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]
Logiquement, je viens de mettre li {white-space:nowrap;}
, mais il y a un problème avec les navigateurs WebKit. Les produits avec nowrap se coincer à des éléments adjacents. Donc, dans le cas ci-dessus, tous les li
sera sur la même ligne.
va de même pour un élément isolé avec nowrap
l'intérieur d'un bloc de texte d'emballage.
<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>.
Ce que je me attends quelque chose comme:
Visitez mes sites Gabriel Radic .com ou
Timbru Blog
Au lieu de cela, les deux liens finissent coincés ensemble, comme:
Visitez mes sites
Gabriel Radic .com ou Timbru Blog (roumain)
Y at-il une belle façon de dire Safari, Chrome et d'autres pour arrêter saisir les coudes des gens?
Merci pour votre aide.
La solution
Au lieu d'utiliser white-space:nowrap
, dans ce cas, il est plus approprié d'aller avec display:inline-block
.
Le CSS doit être adapté ici et là pour le changement, mais il fonctionne comme prévu.
Autres conseils
Donc, si je comprends bien, vous voulez que le texte à l'intérieur des éléments de liste pour envelopper, mais pas le menu lui-même, est-ce pas? de sorte qu'il ressemble à:
item one | item two | item number | item four
three
Mais pas ressembler à:
item one | item two | item number three |
item four
Si tel est le cas, vous avez essayé de placer la nowrap
sur la ul
réelle plutôt que sur les éléments de la liste, car il est le ul
que vous essayez de ne pas faire envelopper? Définissez ensuite une largeur pour les éléments de la liste afin qu'ils envelopper pour adapter cette largeur.