Comment puis-je aligner les blocs en ligne à gauche et à droite sur une seule ligne ?

Alignement des blocs en ligne à gauche et à droite sur une seule ligne

Lorsque vous travaillez avec des blocs en ligne, il peut être difficile de les aligner avec précision sur une seule ligne. Cet article propose deux solutions à ce problème : Flexbox et la justification d'alignement du texte.

Solution Flexbox

Flexbox propose une solution élégante et concise. En appliquant display: flex; au conteneur parent et justifier-contenu: espace-entre; pour aligner les éléments enfants, vous pouvez facilement obtenir l'alignement souhaité.

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

Solution de justification d'alignement de texte

L'utilisation de la justification d'alignement de texte est une autre option viable. Voici un exemple de code CSS qui combine la technique avec certains hacks spécifiques au navigateur pour une meilleure compatibilité :

<code class="css">.header {
  background: #ccc; 
  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;
}

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

  /* ie 7*/ 
  *display: inline;
  *zoom: 1;
  *text-align: left; 
}

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

  /* ie 7*/
  *display: inline;
  *zoom:1;
  *text-align: right;
}</code>

Cette approche fonctionne bien sur différents navigateurs, y compris IE7 et versions ultérieures.

N'oubliez pas, si Les éléments de bloc en ligne ne sont pas séparés par des espaces, la solution de justification d'alignement du texte peut ne pas fonctionner. De plus, définir la taille de police de l'élément parent sur 0 et la réinitialiser à la valeur souhaitée pour les éléments enfants peut aider à supprimer l'espace supplémentaire introduit par le pseudo-élément after.

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!