La liste dépasse la largeur du conteneur parent

Je souhaite créer une navigation dans l'en-tête contenant trois éléments où les deux premiers sont alignés à gauche et le troisième est aligné à droite. Je l'ai essayé en utilisant la flexbox mais il y a une arror: Le ul dépasse la largeur de son conteneur parent.La liste dépasse la largeur du conteneur parent

header { 
 
    width: 100%; 
 
    background: #417690; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    font-size: 20px; 
 
    height: 70px; 
 
} 
 

 
header ul { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    /* justify-content: center; */ 
 
} 
 

 
header ul li { 
 
    display: inline-block; 
 
    padding-right: 15px; 
 
    margin-left: 10px; 
 
} 
 

 
.filler { 
 
    flex-grow: 1; 
 
}

<header> 
 
    <ul> 
 
    <li><a href="#">Logo</a></li> 
 
    <li><a href="#">New article</a></li> 
 
    <li class="filler"></li> 
 
    <li><a href="#">username</a></li> 
 
    </ul> 
 
</header>

Comment puis-je résoudre ce problème? Testé en FF et Opera.

Source

2017-10-13 Sempervivum

L'élément de remplissage est complètement inutile. Utilisez une marge flexible 'auto'. https://stackoverflow.com/a/33856609/3597276 –

@Michael_B N'a pas aimé le remplisseur et c'est génial que vous avez fourni une solution pour faire sans! – Sempervivum

Essayez ceci:

header ul { 
    box-sizing: border-box; 
    padding: 0; 
}

Source

2017-10-13 06:47:06 vortin

Merci, cela l'a réparé. – Sempervivum

Réinitialiser margin à zéro et ajouter box-sizing: border-box à tous les éléments à inclure le padding dans les calculs de taille. Vous pouvez également réinitialiser le padding pour l'élément ul - voir démo ci-dessous:

* { /* ADDED */ 
 
    box-sizing: border-box; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    background: #417690; 
 
    /*margin-left: 10px; 
 
    margin-right: 10px;*/ 
 
    font-size: 20px; 
 
    height: 70px; 
 
} 
 

 
header ul { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    /* justify-content: center; */ 
 
    padding: 0; /* ADDED */ 
 
} 
 

 
header ul li { 
 
    display: inline-block; 
 
    padding-right: 15px; 
 
    margin-left: 10px; 
 
} 
 

 
.filler { 
 
    flex-grow: 1; 
 
}

<header> 
 
    <ul> 
 
    <li><a href="#">Logo</a></li> 
 
    <li><a href="#">New article</a></li> 
 
    <li class="filler"></li> 
 
    <li><a href="#">username</a></li> 
 
    </ul> 
 
</header>

Source

2017-10-13 06:49:48 kukkuz

Merci, cela le corrige en effet. Quelle est l'explication? Est-ce que la largeur de réglage à 100% entraîne une largeur de (100% + padding + margin + border)? – Sempervivum

@Sempervivum En l'absence de toute propriété 'box-sizing', oui. –

La liste dépasse la largeur du conteneur parent

Répondre

Questions connexes