Comment aligner deux éléments de bloc en ligne à gauche et à droite sur la même ligne ?

Aligner deux blocs en ligne à gauche et à droite sur la même ligne

Dans le développement Web moderne, aligner deux éléments de bloc en ligne à gauche et à droite sur la même ligne peut être une tâche apparemment complexe. Cependant, utiliser les bonnes techniques peut simplifier l'approche.

Flexbox

Flexbox fournit une solution simple. En appliquant display: flex au conteneur parent et justifier-content: space-between à ses enfants, les éléments peuvent être placés aux extrémités opposées du conteneur avec un espacement égal. Cela peut être facilement implémenté comme suit :

<code class="css">.header {
    display: flex;
    justify-content: space-between;
}</code>

Text-Align : Justify

Une technique alternative consiste à utiliser text-align : justifier sur l'élément parent. Cependant, cela nécessite des hacks supplémentaires pour assurer la compatibilité avec les anciens navigateurs :

<code class="css">.header {
    text-align: justify;
    /* IE 7 */
    *width: 100%;
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}</code>

Pour éviter que de l'espace supplémentaire ne soit inséré avec le pseudo-élément :after, une astuce peut être utilisée :

<code class="css">.header {
    font-size: 0;
}
h1, .nav {
    font-size: 14px;
}</code>

En définissant la taille de police de l'élément parent sur 0 et en la réinitialisant pour les éléments enfants, le problème peut être résolu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!