Comment aligner horizontalement deux éléments sans modifier le code HTML ?

Aligner deux éléments sur la même ligne sans modifier le balisage

Lorsque vous stylisez des éléments, les aligner horizontalement peut être un défi, surtout si leur largeur fluctue. Considérons un scénario avec deux éléments, « element1 » et « element2 », positionnés sur la même ligne avec des flotteurs gauche et droit, respectivement. Le défi survient lorsque la largeur de « element2 » varie, ce qui entraîne un désalignement avec « element1 ».

Pour résoudre ce problème, la propriété CSS display:inline-block fournit une solution. En appliquant cette propriété aux deux éléments, ils se comporteront comme des éléments en ligne mais seront positionnés comme des éléments de bloc.

Code CSS :

#element1 {
  display: inline-block;
  margin-right: 10px; /* Adjust the margin for desired spacing */
}

#element2 {
  display: inline-block;
}

Marquage :

<div>

En définissant display:inline-block sur les deux éléments, ils s'aligneront horizontalement avec une marge spécifiée de 10px entre eux. Cela garantit que "element2" s'aligne avec "element1" même lorsque sa largeur change, sans modifier la structure HTML.

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!