Comment aligner des blocs en ligne sur la même ligne : Flexbox ou justification de texte ?

Aligner des blocs en ligne sur la même ligne : une solution complète

Bien qu'aligner des blocs en ligne sur la même ligne puisse être difficile, il existe des solutions efficaces disponibles. Examinons deux approches couramment utilisées.

Option 1 : Flexbox

Flexbox offre un moyen simple et flexible d'obtenir l'alignement souhaité. En appliquant display: flex; au conteneur parent, vous pouvez manipuler le placement de ses enfants à l'aide de justification-content: space-between;. Cette approche offre une excellente compatibilité entre navigateurs.

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

Option 2 : Justification du texte

Pour une prise en charge plus large du navigateur, vous pouvez utiliser la technique text-align: justifie ainsi que les star-hacks pour anciennes versions d'Internet Explorer.

<code class="css">.header {
  background: #ccc;
  text-align: justify;
}

.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;
}</code>

Cette méthode corrige l'absence de séparation entre les éléments de bloc en ligne en ajoutant un élément vide à l'aide du pseudo-élément :after :

<code class="css">.header:after {
  content: '';
  display: inline-block;
  width: 100%;
  ...
}</code>

Pour éliminez l'espace supplémentaire causé par le pseudo-élément :after, définissez la taille de la police sur 0 pour le parent et réinitialisez-la à la valeur souhaitée pour les éléments enfants :

<code class="css">.header {
  font-size: 0;
}

h1, .nav {
  font-size: 14px;
}</code>

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!