Wie lässt man ein div-Element mithilfe von CSS inline erscheinen?
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;
}
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;
}
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>
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>
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>
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>
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;
}
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;
}
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Machen Sie Ihren ersten Seltsamen -Sufle -Übergang
Mar 15, 2025 am 11:08 AM
Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Show, Don ' Tell
Mar 16, 2025 am 11:49 AM
Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Erstellen Sie Ihr eigenes Bragdoc mit ELEITY
Mar 18, 2025 am 11:23 AM
Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.
Vue 3
Apr 02, 2025 pm 06:32 PM
Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.
Ein bisschen auf CI/CD
Apr 02, 2025 pm 06:21 PM
Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:
Verwenden wir (x, x, x, x), um über Spezifität zu sprechen
Mar 24, 2025 am 10:37 AM
Ich habe mich neulich mit Eric Meyer unterhalten und erinnerte mich an eine Eric Meyer -Geschichte aus meinen prägenden Jahren. Ich habe einen Blog -Beitrag über CSS -Spezifität geschrieben, und
