comment garder les éléments en ligne de l'emballage?

Question

J'ai des éléments de menu qui ressemblent à ce

<ul> 
    <li>Item1<span class="context-trigger"></span></li> 
    <li>Item2<span class="context-trigger"></span></li> 
    <li>Item3<span class="context-trigger"></span></li> 
</ul> 

avec CSS qui transforme le haut dans un menu horizontal et JS qui fait tourner les [portées] dans les boutons qui apportent des menus contextuels. Vaguement comme ceci:

 
Item1^ Item2^ Item3^ 

Si le menu est trop large pour la largeur du navigateur, il enveloppe, qui est ce que je veux. Le problème est que parfois, il y a des sauts de ligne avant les [span]. Je veux seulement que ça casse entre [li] s. Des idées?

Answer 1

essayez d'utiliser

white-space: nowrap; 

dans la définition de la classe de votre css contexte déclencheur.

Editer: Je pense que patmortech est correct, mettre Nowrap sur la durée ne fonctionne pas, car il n'y a pas de contenu "d'espace blanc". Il se peut également que le fait de coller le style sur l'élément LI ne fonctionne pas non plus, car le navigateur risque de casser les parties car le span est un élément imbriqué dans li. Vous pouvez reconsidérer votre code, supprimer l'élément SPAN et utiliser css sur les éléments LI.

Answer 2

Vous devez mettre les éléments suivants pour garder votre élément de la liste d'emballage (mettre dans la classe contexte déclencheur serait tout simplement garder le contenu de portée de l'emballage):

li { white-space:nowrap; } 

Answer 3

Si vous flottez les <li> éléments, vous devriez obtenir l'effet que vous voulez.