1. Accueil
  2. Question et réponse
  3. Envelopper chaque élément dans la liste horizontale en utilisant CSS

Envelopper chaque élément dans la liste horizontale en utilisant CSS

2011-12-09 3 views
2

J'ai une liste horizontale avec des éléments longs que je veux envelopper. La liste se termine correctement si un élément de liste est vraiment long ou si tous les éléments de liste sont vraiment courts. Cependant, si deux éléments de liste sont longs, ils ne se diviseront pas dans l'espace disponible. Cette image montre le problème:Envelopper chaque élément dans la liste horizontale en utilisant CSS

enter image description here

Voici le balisage j'utilise:

<html> 
<style> 
    ul {text-align:left; width:400px} 
    li {float:left; padding-left:20px; list-style-type:none; display:inline; white-space:normal;} 
    li a {display:inline; white-space:normal;} 
</style> 
<body> 
<ul> 
    <li><a href="#">>alf; fa sadlf;</a> </li> 
    <li><a href="#">>a sdf; fa sd; asd;lfgj </a></li> 
    <li><a href="#">>a sdfasdgsadlf; asd;lfgj asdgsadlf sd; asd;lfgj</a> </li> 
    <li><a href="#">>a sdg gj asdgsadlf; afg adfg asd;lkfalfgj</a></li> 
</ul> 
</body> 
</html>

Source

2011-12-09 Fred

+0

Je ne comprends pas vraiment. Où sont les articles censés être emballés? –

Répondre

2

Vous pouvez le faire en supprimant une partie de votre code. Si je comprends bien, tout ce que vous aurez besoin est la suivante:

ul { width:400px; } 
li { 
    list-style-type:none; 
    display:inline; 
    padding-left:20px 
}

Voici un exemple: http://jsfiddle.net/M9zqE/

Source

2011-12-09 19:07:14 motoxer4533

+0

Génial. Merci à vous deux! Je ne pensais pas au fait que le flotteur faisait que l'inline ne fonctionne pas. Merci encore! – Fred

Questions connexes

 Questions connexes