Comment aligner des blocs en ligne horizontalement sur la même ligne ?

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 de 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 : technique de justification :

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 pseudo-élément en-tête :after 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 : ligne de base pour maintenir leurs lignes de base.

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!