Wie lässt man ein div-Element mithilfe von CSS inline erscheinen?-CSS-Tutorial-php.cn

Wie lässt man ein div-Element mithilfe von CSS inline erscheinen?

WBOY

Freigeben： 2023-09-19 16:45:04

nach vorne

1396 Leute haben es durchsucht

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

CSS steht für Cascading Style Sheet, das das Erscheinungsbild von HTML-Elementen in einer Vielzahl von Medien angibt, darunter Druck, Anzeige und andere Druck- und Digitalformate. Mit CSS können Sie viel Arbeit sparen. Es kann das Design mehrerer Webseiten gleichzeitig verwalten.

In diesem Artikel werden wir sehen, wie man ein div-Element mithilfe von CSS inline erscheinen lässt. Dazu müssen wir zunächst einige CSS-Eigenschaften kennen, die verwendet werden, um ein div-Element inline erscheinen zu lassen -

Display – Das Anzeigeattribut gibt den Rendering-Box-Typ (Anzeigeverhalten) des Elements an. Hier verwenden wir die Eigenschaften display:flex und display:inline-block.
Float – Mit dem Float-Attribut können Sie einem Element anweisen, nach links zu schweben, nach rechts zu schweben oder überhaupt nicht zu schweben. Hier verwenden wir die Eigenschaft „float left“, um ein nach links schwebendes Div anzuzeigen.
inline Elemente beginnen nicht in einer neuen Zeile und nehmen nur die erforderliche Breite ein. Breite und Höhe können nicht eingestellt werden.

.inline-element {
   display: inline;
   width: 1000px;
   height: 1000px;
}

Nach dem Login kopieren

Hier sind einige Elemente mit Standard-Inline-Attributen -

Span
eins
img

Formatieren Sie Tags, die im Wesentlichen Inline sind –

Sie
stark
ich
klein

Inline-Block Formatieren Sie Inline-Elemente, die nicht in einer neuen Zeile beginnen. Sie können jedoch Breiten- und Höhenwerte festlegen.

.inline-block-element {
   display: inline-block;
   width: 1000px;
   height: 1000px;
}

Nach dem Login kopieren

block Elemente beginnen in einer neuen Zeile und nutzen die gesamte verfügbare Breite. Sie können Werte für Breite und Höhe festlegen.

Hier sind einige Elemente mit Standardblockattributen -

div
h1
p
li
Teil

Damit die div-Komponente inline angezeigt wird, erstellen wir zunächst einfachen HTML-Code und wenden verschiedene CSS-Stile an.

Beispiel

In diesem Beispiel ist für alle div-Elemente das übergeordnete div mit den Einstellungen display: flex und flex-direction: row festgelegt. Dank des Attributs „flex-direction: row“ werden alle im übergeordneten Div enthaltenen Komponenten in einer Zeile angezeigt.

<!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>

Nach dem Login kopieren

Beispiel

In diesem Beispiel müssen wir das Attribut display: inlineblock allen Divs hinzufügen, die inline angezeigt werden müssen. Wenn das Attribut display:inlineblock angewendet wird, werden alle div-Komponenten nebeneinander platziert.

<!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>

Nach dem Login kopieren

Beispiel

Um in diesem Beispiel alle div-Elemente inline anzuzeigen, geben wir ihnen das Attribut float: left. Darüber hinaus können Benutzer die CSS-Option float: right verwenden, um alle div-Komponenten in umgekehrter Reihenfolge, beginnend von rechts, anzuzeigen.

<!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>

Nach dem Login kopieren

Beispiel

Diese Methode verwendet span-Elemente anstelle von div-Elementen. Wenn der Benutzer nur Text in ein div-Tag schreiben muss, kann das span-Tag verwendet werden, da alle span-Elemente standardmäßig inline angezeigt werden.

<!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>

Nach dem Login kopieren

Der Hauptunterschied zu display:inline besteht darin, dass Sie den display:inline-Block verwenden können, um die Breite und Höhe eines Elements festzulegen.

Außerdem bleiben display:inline-Blöcke erhalten, wobei der obere und untere Rand/Abstand erhalten bleibt, jedoch nicht in display:inline. Der Hauptunterschied zu display:block besteht darin, dass display:inlineblock nach dem Element keine neue Zeile hinzufügt, sodass ein Element neben einem anderen Element platziert werden kann.

Der folgende Codeausschnitt demonstriert die unterschiedlichen Verhaltensweisen von display: inline, display: inline-block und 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;
}

Nach dem Login kopieren

Inline-Blöcke zum Erstellen von Navigationslinks

Häufige Anzeigeverwendung: Inline-Blöcke werden verwendet, um Listenelemente horizontal statt vertikal anzuzeigen. Das folgende Beispiel erstellt einen horizontalen Navigationslink.

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie lässt man ein div-Element mithilfe von CSS inline erscheinen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!