Maison > interface Web > tutoriel CSS > Que signifie display:inline ?

Que signifie display:inline ?

coldplay.xixi
Libérer: 2020-06-30 16:45:51
original
14677 Les gens l'ont consulté

display:inline signifie définir l'objet à afficher en tant qu'élément en ligne. inline est la valeur par défaut pour les objets en ligne, et le div couramment utilisé est un élément de niveau bloc. mais l'affichage du div est Si défini sur en ligne, plusieurs divs seront affichés sur une seule ligne.

Que signifie display:inline ?

display:inline signifie :

Définissez l'objet à afficher en tant qu'élément en ligne, inline est un élément en ligne object La valeur par défaut de (ps : les objets en ligne sont des éléments qui ne génèrent pas automatiquement de sauts de ligne, comme span). Le div que nous utilisons généralement est un élément de niveau bloc, et l'attribut d'affichage par défaut est block Mais si l'affichage de. le div est défini sur inline, multiple Le div peut désormais être affiché sur une seule ligne comme un span.

Il peut changer l'affichage en ligne des éléments de bloc en affichage en ligne, par exemple

<div> DIV1 </div>
 
<div> DIV2 </div>
Copier après la connexion

Ici, DIV1 et DIV2 occupent une ligne chacun, mais ils changent après que vous leur ayez ajouté des attributs

<div style= "display:inline "> DIV1 </div>
 
<div style= "display:inline "> DIV2 </div>
Copier après la connexion

DIV1 et DIV2 sont maintenant affichés sur la même ligne. Essayez-le.

et display:inline correspondent à display:block. block fera de la balise HTML appliquée avec l'attribut CSS un élément de niveau bloc. Par exemple, SPAN est affiché en ligne, mais si vous ajoutez display:block. attribut, ce sera C'est différent

<span style= "display:block "> SPAN1 </span>
 
<span style= "display:block "> SPAN2 </span>
Copier après la connexion

Tutoriel recommandé : "tutoriel css"

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!

Étiquettes associées:
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal