Pb distribution horizontale

Bonjour,

Après pas mal de recherches sur le forum, je n'ai toujours pas trouvé ma solution donc voici mon problème : je cherche à distribuer horizontalement des items.

Exemple : Bord gauche - X - Item 1 - X - Item 2 - X - Item 3 - X - Item 4 - X - Bord droit
Où X : espacement qui est toujours le même QUELQUE SOIT LA LONGUEUR DES LIBELLES ITEM

Voici le code (j'ai intégré délibérement le CSS dans le HTML juste pour l'exemple) :

<div>
<ul style="width: 100%; display: table; padding: 0px;">
<li style="display: table-cell; text-align: center;">Item qui a la particularité d'être vraiment très très long</li>
<li style="display: table-cell; text-align: center">Item court</li>
<li style="display: table-cell; text-align: center">Item court</li>
<li style="display: table-cell; text-align: center">Item court</li>
</ul>
</div>

Mon problème l'espace entre les items n'est pas le même car mes items ne font pas tous la même longueur.

Merci pour votre aide

Bonjour,

j'imagine qu'avec un tableau tu ferais :

table {width:100%;}td {width:25%;}

?

Cordialement

Merci gc-nomade mais je ne suis pas sur car en faisant 4 li ou td en width 25%, cela ne tient pas compte que les libellés (items) n'ont pas la même longueur.

Et j'aimerai bien aussi le faire plutot en full CSS

D'autres idées ?

padding peut-etre ?

une image du résultat attendu serait utile a comprendre ce que tu veut faire.

GC

Voici ce que je souhaite :


Voici ce qui apparait :

Bonjour, applique ton width: 100% et ton text-align: center sur ton div.
Pour tes li, display: inline.
Pour tes espacements utilise padding ou margin, à toi de faire les tests et voir.

Ca marche très bien quand je connais d'avance la longueur des libellés mais ce n'est pas mon cas malheureusement : mes items sont dynamiques et donc je ne sais de combien va etre le padding.

Ex affichage du nom d'une ville de France prise aléatoirement : on a aussi bien Paris (5 caracteres) que Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson

A moins de fixer le padding / margin à la volée via PHP mais ce n'est pas mon souhait.