18041 sujets

Questions générales et questions de débutants

[Résolu] Justify-content: space-between; Problème de débordement.

Bonjour,
J'ai un soucis avec la propriété justify-content: space-between.
Dès que je mets un padding en pourcentage sur l'élément enfant, cela fait déborder mon div, alors que si le padding est en px, alors pas de débordement, cela ajuste bien la taille de mon div au lieu de le faire déborder de la page.
header
{
    display: flex;
    justify-content: space-between;
}

nav li
{
    font-size: 90%;
    padding-left: 22%;         Là ça fait déborder mon nav hors de la page
    padding-right: 22%;
}
nav li
{
    font-size: 90%;
    padding-left: 22px;         Là le nav s'ajuste bien
    padding-right: 22px;
}

Ma question est : comment faire (sans changer space-between) pour conserver des unités en % sans que cela ne déborde?
Quelqu'un peut-il m'aider?
Modifié par _laurent (25 Jan 2022 - 23:46)
Modérateur
Salut,

Il nous manque la structure de ton HTML. Ton header est en display flex mais la tu nous parles des li qui sont dans un nav donc il y a un niveau de plus et le flex n'est pas pris en compte.
Ha oui pardon !
Voici le html pour le header:

<body>
        <div id="bloc_page">
            <header> <!-- En-tête du site -->
                <div id="logo_booki">
                    <img src="images/logo/Booki@3x.png" alt="Logo Booki.com" />
                </div>
                <nav>
                    <ul>
                        <li><div id="heberge"><a href="#hebergements">Hébergements</a></div></li>
                        <li><div id="activ"><a href="#activites">Activités</a></div></li>
                    </ul>
                </nav>
            </header>


Je souhaite que mon header soit en dispo space-between (donc avec mon logo d'un coté et mon nav de l'autre), mais le padding en % pour les nav li fait sortir le nav de la page.

[EDIT]Pense a utiliser les blocs de mise en forme pour tes bouts de code Smiley cligne [/EDIT]
Modifié par _laurent (26 Jan 2022 - 09:40)
Modérateur
Effectivement c'est étrange... le calcul en % avec les li doit faire buguer le flex... je ne vois pas de solution pour le moment à part changer ta facon de faire... d'ailleur, pourquoi s'attacher absoluement à 22% de padding ? Surtout que dans ce cas là, le % ne sert a rien, il aura toujours la meme taille. Autant mettre des px Smiley lol
Merci pour tes retours Laurent !
Oui, au final j'ai opté pour garder les px plutôt que les %, mais la question me trottait dans la tête alors j'ai tenté d'y trouver une réponse sur le forum (ça reste donc bizarre tout de même...)
Merci encore et bonne journée !
Sujet clos
Aller à