Discussion :

[Gizmil]

Salut,

J'ai une liste dont les <li> sont tous en float:left

Problème: j'aimerais que, passé 5 éléments de la liste, ce qui suit passe à la ligne. Donc, comme ceci:

elementListe-elementListe-elementListe-elementListe-elementListe
elementListe-elementListe-elementListe-elementListe-elementListe
elementListe-elementListe-elementListe-elementListe-elementListe
elementListe-elementListe-elementListe-elementListe-elementListe

J'ai tenté d'affecter une valeur de largeur sur le <ul> ainsi que sur une <div> renfermant la liste, pensant que ça forcerait les éléments à passer à la ligne. Résultat: c'est l'inverse qui se produit, les éléments de la liste forcent le contener à s'agrandir au delà de la largeur fixée.
J'ai essayé clear:both mais seul l'élément ayant reçu cette affectation passe à la ligne.

Bref, comment faire pour avoir le résultat indiqué ci-dessus? Merci!

EDIT: Désolé, je me suis trompé de section, merci aux modos de bien vouloir transférer ce post dans le forum CSS...

[Haze.]

Salut,

Il suffit de mettre une classe toutes les 5 balises <li>, et d'appliquer un clear: left sur cette classe pour forcer le retour à la ligne.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
li
{
	float: left;
}
li.newline
{
	clear: left;
}

Code XHTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
	<li>élément liste</li>
	<li>élément liste</li>
	<li>élément liste</li>
	<li>élément liste</li>
	<li>élément liste</li>
	<li class="newline">élément liste</li>
	<li>élément liste</li>
	<li>élément liste</li>
	<li>élément liste</li>
	<li>élément liste</li>
	<li class="newline">élément liste</li>
	<li>élément liste</li>
</ul>

Cependant je ne trouve pas ça très élégant, il faudrait peut-être songer à réorganiser la structure de tes éléments (avec un tableau, ou alors en les découpant en plusieurs listes de 5 éléments, etc.).

[Bisûnûrs]

En faisant ça je n'ai aucun problème :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
   <li>Texte</li>
   <li>Texte</li>
   <li>Texte</li>
   <li>Texte</li>
   <li>Texte</li>
   <li>Texte</li>
   <li>Texte</li>
   <li>Texte</li>
   <li>Texte</li>
   <li>Texte</li>
   <li>Texte</li>
   <li>Texte</li>
</ul>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
ul{
   width:500px;
}
li{
   width:100px;
   float:left;
}

[Gizmil]

Oui, Bisûnûrs est dans le vrai!

Me suis bien planté sur ce coup-là! Faut vraiment que j'apprenne à être plus attentif! J'avais fais une erreur dans mon code...

Bref, désolé de vous avoir dérangé alors que le problème était ailleurs...

Vous avez gagné le droit de me faire ça: