Comment afficher des éléments DIV en ligne sans comportement inattendu ?

Style des éléments DIV pour l'affichage en ligne

Les éléments Div, par défaut, s'affichent sous forme d'éléments de niveau bloc, occupant leurs propres lignes lorsqu'ils sont rendus dans une page Internet. Cependant, il existe des scénarios dans lesquels il est souhaitable de les présenter en ligne, s'écoulant horizontalement sans sauts de ligne.

Question :

Étant donné le code HTML suivant :

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

Comment pouvons-nous afficher ces divs sous forme de séquence en ligne comme :

foo bar baz

au lieu d'apparaître comme :

foo
bar
baz

Réponse :

Bien qu'il soit possible de forcer l'affichage des divs en ligne à l'aide de CSS des techniques comme display: inline-block, cela peut entraîner un comportement inattendu et est généralement déconseillé. Une solution plus appropriée consiste à remplacer les éléments div par des éléments span, qui sont intrinsèquement des éléments en ligne.

Le code suivant illustre cette approche :

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

Cela rendra le texte en ligne comme :

foo bar baz

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!