Auto-width des <li>

Bonjour,

J'ai une problématique simple mais malgré quelques tentatives, je n'ai aucune solution parfaitement adaptée.

J'ai une liste à puce, d'une dimension fixe ( qui agit comme menu horizontal ) comme ceci.

<ul id="portal-globalnav">
	<li><a href="#">item1</a></li>
	<li><a href="#">item2</a></li>
	<li><a href="#">item3</a></li>
	<li><a href="#">item4</a></li>
</ul>

#portal-globalnav {
	list-style-type:none;
	width: 400px;
}

#portal-globalnav li {
	/* Cas 1
	float:left;
	width:25%;
	*/
	/* Cas 2 */
	display:table-cell;
	width:100%
}

Donc, en gros, j'aimerais que mes items de la liste répartis également dans le 400px de leur parent (le UL ). Cependant, si j'aimerais qu'en ajoutant un item de liste, mes <li> aient la dimension de 20% (5 * 20 % = 100% du bloc UL ).

La notion avec les pourcentage fonctionne bien. Cependant, elle n'est pas dynamique, ainsi, si je retire ou ajoute un item de liste, je dois impérativement modifié le width et c'est ce que j'aimerais éviter.

La solution la plus prêt est avec le display:table-cell ( Cas 2 ) Cependant, il n'y a que le premier item de liste qui s'ajuste et le reste des li est à son plus petit.

Merci d'une éventuelle réponse.

Phil

Il va falloir passer par un langage dynamique (PHP ou JS selon la situation) pour pouvoir adapter la largeur en fonction du nombre dynamique de blocs. En effet, si tu attribues une largeur égale à tes éléments, lorsque tu en rajouteras un il faudra la diminuer. Si tu n'en mets pas, les éléments rentreront dans le bloc mais ne seront pas de taille égale.

bonsoir

si tu veux faire usage du display:table-cell sur li , il serait judicieux de declarer ul en display:table.

Cela ne marchera que dans IE8 et les autres navigateurs .IE7 se contenteras de rien du tout ou d'un vrai tableau.

GC

Bonjour,

Merci de vos réponses rapides, j'espérais une solution uniquement CSS mais si le seul moyen est de le faire dynamiquement en PHP, qu'il en soit ainsi.

Merci.

Phil