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

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

Lorsque vous essayez d'aligner deux éléments côte à côte à l'aide de flotteurs CSS, c'est un défi pour assurer un alignement précis lorsque les largeurs des éléments varient. Si modifier la structure HTML n'est pas une option, il existe une technique CSS pour aligner les éléments sur la même ligne.

La solution réside dans l'utilisation de la propriété display:inline-block. Voici comment :

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

Ce CSS définit les deux éléments pour qu'ils s'affichent sous forme de blocs en ligne, leur permettant de s'asseoir côte à côte comme du texte. La propriété margin-right sur #element1 crée l'espacement souhaité entre les éléments.

Par exemple, si #element1 contient le « balisage de l'élément 1 » et #element2 contient le « balisage de l'élément 2 », le CSS ci-dessus entraînera ce qui suit :

<div>

Cette technique garantit que les deux éléments s'alignent horizontalement, même avec des largeurs variables, offrant une expérience d'alignement uniforme.

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!