Comment faire apparaître un élément div en ligne en utilisant CSS ?-tutoriel CSS-php.cn

Comment faire apparaître un élément div en ligne en utilisant CSS ?

WBOY

Libérer： 2023-09-19 16:45:04

avant

1396 Les gens l'ont consulté

如何使用 CSS 使 div 元素内联显示？

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.
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;
}

Copier après la connexion

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;
}

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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;
}

Copier après la connexion

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;
}

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!