28172 sujets

CSS et mise en forme, CSS3

Li qui prend toute la largeur

Bonjour,

comment faire pour que les box s'élargissent à droite et à gauche et se collent en restant centrés sauf pour la première qui ne s'élargit qu'à droite et la dernière qu'à gauche
c'est des li dans ul
upload/1645716140-84262-gtrg.png
j'ai mis justify-content: space-around; mais les box ne sont plus centrés quand je mets flex-grow
upload/1645716179-84262-sdfsdgtf.png
les box sont centrés comme sur la première capture d'écran mais plus grandes et se touchent
upload/1645716203-84262-dgfsgfts.png

le code : https://jsfiddle.net/Alexx22/yma3ofd6/#&togetherjs=IGpOrwlzJ0
Modifié par Alex0123456 (24 Feb 2022 - 17:08)
Modérateur
Salut !

Alex0123456 a écrit :
comment faire pour que les box s'élargissent à droite et à gauche et se collent en restant centrés sauf pour la première qui ne s'élargit qu'à droite et la dernière qu'à gauche

Alors c'est hyper simple : j'ai rien compris Smiley lol

J'ai pas compris le coup de la premier et la dernière qui ne s'agrandissent que d'un coté... du coup elle sont plus petite des celles du milieu ? T'as pas une image du résultat souhaité ?
j'ai fait une liste ul li en justify-content: space-around et je voudrais que juste les box s'élargissent et se collent ce serait donc justify-content: space-around sans espace car sinon régler la taille des box à la main ce serait pas vraiment centré

justify-content: space-around;
upload/1645813270-84262-sfqsqsf.png

je veux que les boites soient collé et de la meme taille
upload/1645813291-84262-wxdfsdf.png
Modérateur
Bonjour,

Il me semble que le "justify-content" n'a pas besoin d'être en "space-around". La valeur "normal" suffit.

Il y a cependant quelques détails qui peuvent améliorer le rendu, en particulier suppression des margin et padding des ul et li, display: block et margin: auto pour les liens et un min-width pour les li (c'est peut-être un peu tout ça qui t'empêchait d'obtenir ce que tu voulais).

J'aurais fait comme ça : https://jsfiddle.net/parsimonhi/2b6gckdf/

Amicalement,
Sujet clos
Aller à