Comment puis-je afficher plusieurs éléments Div en ligne sur une seule ligne ?

Affichage des éléments div en ligne

Lors de la création d'une page Web, vous pouvez rencontrer une situation dans laquelle vous souhaitez afficher plusieurs éléments div adjacents à chacun l'autre sur la même ligne horizontale. Cependant, les éléments div par défaut sont des éléments de bloc, ce qui signifie qu'ils s'affichent naturellement sur des lignes séparées.

Divs en ligne : une solution de contournement

Pour obtenir un affichage en ligne pour les éléments div, il existe une solution de contournement qui implique de remplacer les propriétés par défaut au niveau du bloc. Une méthode populaire consiste à définir explicitement leur propriété d'affichage sur inline à l'aide de CSS. Cela les oblige à se comporter comme des éléments en ligne, apparaissant les uns à côté des autres sur une seule ligne.

Exemple :

Considérez le HTML suivant :

<div>foo</div>
<div>bar</div>
<div>baz</div>

Par défaut, ces divs s'empileront verticalement. Pour les afficher en ligne, ajoutez le CSS suivant :

div {
  display: inline;
}

Cette modification aboutit au résultat souhaité :

foo bar baz

Approche alternative : utiliser les éléments Span

Une autre approche consiste à remplacer les éléments div par des éléments span. Les spans sont intrinsèquement des éléments en ligne, donc leur utilisation à la place des divs élimine le besoin de remplacements CSS.

<span>foo</span>
<span>bar</span>
<span>baz</span>

Dans ce cas, les spans s'afficheront automatiquement en ligne par défaut.

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!