Comment puis-je aligner horizontalement deux éléments sans modifier le HTML ?

Aligner des éléments sur la même ligne sans modifications HTML

Positionner des éléments horizontalement côte à côte peut poser des problèmes lorsque leurs largeurs sont dynamiques. Dans ce scénario, où deux éléments flottent à gauche et à droite sur la même ligne, le problème survient avec la largeur variable de element2 qui risque de ne pas l'aligner avec element1.

Pour résoudre ce problème sans modifier le code HTML, envisagez d'utiliser display:inline- bloc. Cette technique définit les éléments comme des éléments en ligne tout en conservant leur comportement de type bloc. En définissant element1 avec display:inline-block et une valeur de marge droite de 10px, vous créez une distance cohérente entre les deux éléments.

Implémentation :

#element1 {
  display: inline-block;
  margin-right: 10px;
}

#element2 {
  display: inline-block;
}

Exemple :

<div>

Cette méthode vous permet d'aligner l'élément2 à côté de l'élément1 avec un remplissage cohérent entre eux, quelle que soit la largeur dynamique de element2.

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!