Li qui prend toute la largeur
Max0123456
Messages postés
97
Date d'inscription
Statut
Membre
Dernière intervention
-
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
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
j'ai mis justify-content: space-around; mais les box ne sont plus centrés quand je mets flex-grow
les box sont centrés comme sur la première capture d'écran mais plus grandes et se touchent
le code : https://jsfiddle.net/Alexx22/yma3ofd6/#&togetherjs=IGpOrwlzJ0
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
j'ai mis justify-content: space-around; mais les box ne sont plus centrés quand je mets flex-grow
les box sont centrés comme sur la première capture d'écran mais plus grandes et se touchent
le code : https://jsfiddle.net/Alexx22/yma3ofd6/#&togetherjs=IGpOrwlzJ0
A voir également:
- Space li
- Space monger - Télécharger - Optimisation
- Space sniffer - Télécharger - Divers Utilitaires
- Space observer - Télécharger - Gestion de fichiers
- Color space incorrect - Forum PDF
- Impossible de lire les fichiers pdf ✓ - Forum PDF
3 réponses
Bonjour,
Supprime la propriété
Tu devrais utiliser des classes css au lieu d'appliquer les règles css directement sur les balises car ton code va actuellement modifier l'affichage de toutes les balises ul/li utilisées sur ton site.
https://jsfiddle.net/Laujb094/
Supprime la propriété
flex-grow: 1;appliquée sur la balise li et utilise
justify-content: space-between;au lieu de
justify-content: space-around;sur la balise ul.
Tu devrais utiliser des classes css au lieu d'appliquer les règles css directement sur les balises car ton code va actuellement modifier l'affichage de toutes les balises ul/li utilisées sur ton site.
https://jsfiddle.net/Laujb094/
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;
je veux que les boites soient collé et de la meme taille
justify-content: space-around;
je veux que les boites soient collé et de la meme taille
Il ne faut pas utiliser la propriété justify-content si tu ne veux pas d'espace entre tes éléments.
https://jsfiddle.net/4oekhj6s/
Quelques liens utiles :
- https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout
- https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<header>
<nav class="nav">
<ul>
<li><a href="" class="nav-link nav-link-home">Home</a></li>
<li><a href="" class="nav-link nav-link-about">About us</a></li>
<li><a href="" class="nav-link nav-link-product">Products</a></li>
<li><a href="" class="nav-link nav-link-service">Service</a></li>
<li><a href="" class="nav-link nav-link-contact">Contact</a></li>
</ul>
</nav>
</header>
.nav ul {
display: flex;
list-style: none;
padding: 0;
}
.nav li {
flex: 1;
}
.nav .nav-link {
display: block;
padding-top: 40px;
padding-bottom: 40px;
border: 3px solid black;
color: black;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.nav-link-home {
background-color: crimson;
}
.nav-link-about {
background-color: lightblue;
}
.nav-link-product {
background-color: lightgreen;
}
.nav-link-service {
background-color: mediumpurple;
}
.nav-link-contact {
background-color: yellow;
}
https://jsfiddle.net/4oekhj6s/
Quelques liens utiles :
- https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout
- https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://jsfiddle.net/7pxyraqt/
sinon je dois les centrer et ajuster la taille de la box à la main