interface Web
tutoriel CSS
Comment faire apparaître un élément div en ligne en utilisant CSS ?
Comment faire apparaître un élément div en ligne en utilisant CSS ?
CSS signifie Cascading Style Sheet, qui spécifie l'apparence des éléments HTML dans une variété de supports, y compris l'impression, l'affichage et d'autres formats imprimés et numériques. Vous pouvez économiser beaucoup de travail avec CSS. Il peut gérer la conception de plusieurs pages Web simultanément.
Dans cet article, nous verrons comment faire apparaître un élément div en ligne en utilisant CSS, pour cela nous devons d'abord connaître certaines propriétés CSS utilisées pour faire apparaître un élément div en ligne -
Display - L'attribut display spécifie le type de boîte de rendu de l'élément (comportement d'affichage). Ici, nous utiliserons les propriétés display: flex et display: inline-block.
Float - En utilisant l'attribut float, vous pouvez dire à un élément de flotter vers la gauche, de flotter vers la droite ou de ne pas flotter du tout. Ici, nous utiliserons la propriété float left pour afficher un div flottant vers la gauche.
Les éléments inline ne démarrent pas sur une nouvelle ligne et ne prennent que la largeur requise. Vous ne pouvez pas définir la largeur et la hauteur.
.inline-element {
display: inline;
width: 1000px;
height: 1000px;
}
Voici quelques éléments avec des attributs en ligne par défaut -
Durée
un
img
Formater les balises essentiellement en ligne -
Eux
fort
moi
petit
Inline-block Formatez les éléments en ligne qui ne commencent pas sur une nouvelle ligne. Cependant, vous pouvez définir des valeurs de largeur et de hauteur.
.inline-block-element {
display: inline-block;
width: 1000px;
height: 1000px;
}
-
Les éléments
block commencent sur une nouvelle ligne et utilisent toute la largeur disponible. Vous pouvez définir des valeurs pour la largeur et la hauteur.
Voici quelques éléments avec des attributs de bloc par défaut -
div
h1
p
li
Partie
Pour afficher le composant div en ligne, nous allons d'abord créer du code HTML de base et appliquer divers styles CSS.
Exemple
Dans cet exemple, tous les éléments div ont leur div parent défini avec display: flex et flex-direction: row settings. Grâce à l'attribut flex-direction:row, tous les composants contenus dans le div parent apparaîtront sur une seule ligne.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main {
display: flex;
flex-direction: row;
font-size: 30px;
color: red;
border: 4px double red;
padding: 5px;
width: 400px;
}
.main div {
border: 2px solid greenyellow;
margin: 10px 20px;
width: 100px;
}
</style>
</head>
<body>
<div class="main">
<div>Hello, World!</div>
<div>Hello, World!</div>
<div>Hello, World!</div>
</div>
</body>
</html>
Exemple
Dans cet exemple, nous devons ajouter l'attribut display: inlineblock à tous les div qui doivent être affichés en ligne. Si l'attribut display:inlineblock est appliqué, tous les composants div seront placés côte à côte.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
display: inline-block;
color: red;
border: 2px solid greenyellow;
margin: 10px 20px;
width: 120px;
font-size: 40px;
}
</style>
</head>
<body>
<div>Hello, World!</div>
<div>Hello, World!</div>
<div>Hello, World!</div>
</body>
</html>
Exemple
Dans cet exemple, afin d'afficher tous les éléments div en ligne, nous leur donnerons l'attribut float: left. De plus, les utilisateurs peuvent utiliser l'option CSS float: right pour afficher tous les composants div dans l'ordre inverse en commençant par la droite.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
float: left;
color: red;
border: 2px solid greenyellow;
margin: 10px 20px;
width: 120px;
font-size: 40px;
}
</style>
</head>
<body>
<div>Hello, World!</div>
<div>Hello, World!</div>
<div>Hello, World!</div>
</body>
</html>
Exemple
Cette méthode utilise des éléments span au lieu d'éléments div. Si l'utilisateur n'a besoin d'écrire du texte que dans une balise div, la balise span peut être utilisée puisque tous les éléments span sont affichés en ligne par défaut.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
span {
color: green;
border: 2px solid red;
margin: 10px 20px;
width: 100px;
font-size: 30px;
}
</style>
</head>
<body>
<span>Hello World!</span>
<span>Hello World!</span>
<span>Hello World!</span>
</body>
</html>
La principale différence avec display: inline est que vous pouvez utiliser le bloc display: inline pour définir la largeur et la hauteur d'un élément.
Préserve également les blocs display:inline, en préservant les marges/remplissages supérieur et inférieur, mais pas dans display:inline. La principale différence avec display: block est que display: inlineblock n'ajoute pas de nouvelle ligne après l'élément, donc un élément peut être situé à côté d'un autre élément.
L'extrait de code suivant montre les différents comportements de display : inline, display : inline-block et display : block.
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
Blocs en ligne pour créer des liens de navigation
Utilisation courante de l'affichage : les blocs en ligne sont utilisés pour afficher les éléments de la liste horizontalement plutôt que verticalement. L'exemple suivant crée un lien de navigation horizontal.
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Faire votre première transition Svelte personnalisée
Mar 15, 2025 am 11:08 AM
L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Show, ne dit pas
Mar 16, 2025 am 11:49 AM
Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Créer votre propre bragdoc avec Eleventy
Mar 18, 2025 am 11:23 AM
Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Que diable sont les commandes NPM?
Mar 15, 2025 am 11:36 AM
Les commandes NPM exécutent diverses tâches pour vous, soit en tant que processus unique ou en cours d'exécution pour des choses comme le démarrage d'un serveur ou la compilation de code.
