Alignement des blocs en ligne horizontalement sur la même ligne

Problème

Les blocs en ligne offrent des avantages par rapport aux éléments flottants, tels que l'alignement de la ligne de base et le centrage automatique lorsque la fenêtre devient étroite. Cependant, aligner deux blocs en ligne horizontalement sur la même ligne peut poser un défi.

Défis liés à l'alignement des blocs en ligne

• Les flotteurs peuvent interférer avec l'alignement de la ligne de base et provoquer un bouclage indésirable. .
• Le positionnement relatif et absolu peut entraîner des problèmes d'espacement, similaires aux flotteurs.

Solution : Utiliser la justification du texte

Une solution efficace consiste à utiliser l'alignement du texte : justifier la technique :

Code CSS

.header {
    text-align: justify;
    background: #ccc;
}

.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em;
}

.nav {
    display: inline-block;
    vertical-align: baseline;
}

Explication

• Définissez l'alignement du texte de l'élément parent sur "justifier" pour répartir le texte uniformément sur sa largeur.
• Ajoutez un en-tête de pseudo-élément : après pour consommer l'espace restant entre les blocs en ligne.
• Définissez les blocs en ligne h1 et .nav pour afficher : inline-block et vertical-align : baseline pour conserver leurs lignes de base.