Maison > Article > interface Web > Deux div HTML5 peuvent-ils être placés sur une seule ligne ?

Deux div HTML5 peuvent-ils être placés sur une seule ligne ?

青灯夜游original: 2022-04-25 17:32:443420parcourir

Les éléments div HTML5 ne peuvent pas être placés deux sur une seule ligne par défaut. div est un élément de niveau bloc. Un élément occupera une ligne. Par défaut, deux div ne peuvent pas être affichés sur la même ligne. Cependant, vous pouvez ajouter le style "display: inline;" à l'élément div et le convertir en un élément de niveau bloc. élément, afin que plusieurs divs puissent être affichés sur la même ligne.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Les éléments div HTML5 ne peuvent pas être placés deux sur une seule ligne par défaut.

div est un élément de niveau bloc, et un élément occupera sa propre ligne, par conséquent, deux divs ne peuvent pas être affichés sur la même ligne par défaut.

Deux div HTML5 peuvent-ils être placés sur une seule ligne ?

La principale caractéristique des éléments de niveau bloc est qu'ils occupent une ligne qui leur est propre.

Les principales caractéristiques des éléments de niveau bloc sont les suivantes :

Peu importe si la balise de saut de ligne est utilisé ou non, les éléments au niveau du bloc sont toujours dans Démarrer sur une nouvelle ligne

La largeur, la hauteur, les marges et le remplissage des éléments au niveau du bloc peuvent tous être contrôlés ; un élément de niveau bloc est omis, sa largeur par défaut est celle de la fenêtre actuelle du navigateur. La largeur des

Les éléments de niveau bloc peuvent contenir d'autres éléments en ligne et des éléments de niveau bloc.

Mais vous pouvez utiliser l'attribut display pour convertir des éléments de niveau bloc en éléments en ligne, afin que plusieurs div puissent être affichés sur la même ligne.

Les principales caractéristiques des éléments en ligne sont les suivantes :

Les éléments en ligne et les autres éléments seront affichés sur la même ligne

La largeur, la hauteur, les marges et le remplissage des éléments en ligne ne peuvent pas être modifiés ;

La largeur d'un élément en ligne correspond à la largeur de son contenu et ne peut pas être modifiée.

Les éléments en ligne ne peuvent accueillir que du texte ou d'autres éléments en ligne.

Convertir les éléments de niveau bloc en éléments en ligne

Définissez

dans les éléments de niveau bloc pour convertir les éléments de niveau bloc en éléments en ligne. Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
div{
background-color: #FFC0CB;
margin: 10px;
}
.box {
display: inline;
}
</style>
</head>
<body>
<div>一个div元素，块级元素</div>
<div>一个div元素，块级元素</div>
<div>一个div元素，转为了行内元素</div>
<div>一个div元素，转为了行内元素</div>
</body>
</html>

display：inline;

(Partage de vidéos d'apprentissage :

tutoriel vidéo CSS

, Deux div HTML5 peuvent-ils être placés sur une seule ligne ? front-end web

)

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!

Déclaration：

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

Article précédent：A quoi sert l'importation comme dans es6Article suivant：A quoi sert l'importation comme dans es6

Articles Liés

Voir plus