28173 sujets

CSS et mise en forme, CSS3

Présentation liste 3 <li> par ligne

Bonjour,

J'ai une liste (<ul><li>...) qui me permet d'afficher les catégories de mon site les unes à coté des autres (sans renvoi à la ligne ni puce). Je souhaiterai savoir si il existe un moyen pour afficher par exemple 3 <li> par ligne par exemple sans utiliser plusieurs <ul> en utilisant CSS :

catégorie 1 - catégorie 2 - catégorie 3
catégorie 4 - catégorie 5 - catégorie 6
catégorie 7 - ...

J'ai ça pour l'instant :


#nav ul{
list-style-type:none;
text-align: right;
margin: 0;
padding: 0;
}

#nav li{
display: inline;
margin: 0;
padding: 0;
}


Merci d'avance Smiley biggrin
il ne me semble pas possible de faire ca.
le plus simple serait de faire 3 listes 


<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>
<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>
<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>


dans un sens ca serait plus logique ...
dans tout les cas tu tu ne peux pas indiquer un nombre a une liste , enfin pas a ma connaissance Smiley decu
Bonjour,
Effectivement, tu ne peux pas définir le nombre d'items à ta liste.
Par contre tu peux tout à fait définir une largeur de 33% à tes li de façon à ce qu'ils prennent 1/3 de la largeur disponible Smiley cligne ...
Modifié par Jihel (13 Feb 2006 - 17:03)
Jihel a écrit :
Bonjour,
Effectivement, tu ne peux pas définir le nombre d'items à ta liste.
Par contre tu peux tout à fait définir une largeur de 33% à tes li de façon à ce qu'ils prennent 1/3 de la largeur disponible Smiley cligne ...


ca serait se compliquer la tache pour par grand chose je pense Smiley confus
J'ai effectivement oublié de préciser que pour un rendu correct avec la méthode que j'ai présentée, il faut faire flotter les li en plus de leur donner une largeur précise.

C'est à mon point de vue le système le plus rapide dans la mesure où les éléments supplémentaires viendront automatiquement à la ligne, comme dans l'exemple suivant.


ul{
width:160px;
height:auto;
}
li{
float:left;
width:32%;
border:1px solid red;
list-style-type:none;
}



<body>
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</body>

[EDIT]Ne pas oublier un 
<hr style="clear:both" />
si la hauteur du menu est importante. En effet, les flottants ne sont pas pris en compte dans le calcul de la hauteur de leur conteneur avec les navigateurs de type Gecko ! [/EDIT]
Modifié par Jihel (13 Feb 2006 - 22:58)
Sujet clos
Aller à