Maison > interface Web > tutoriel CSS > Comment afficher des éléments DIV en ligne sans comportement inattendu ?

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

Susan Sarandon
Libérer: 2024-12-11 20:24:14
original
305 Les gens l'ont consulté

How to Display DIV Elements Inline Without Unexpected Behavior?

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>
Copier après la connexion

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

foo bar baz
Copier après la connexion
Copier après la connexion

au lieu d'apparaître comme :

foo
bar
baz
Copier après la connexion

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>
Copier après la connexion

Cela rendra le texte en ligne comme :

foo bar baz
Copier après la connexion
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal