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!
Zehn Tonnen WidgetsApr 15, 2025 am 09:43 AMBei einem kürzlichen Konferenzgespräch (sorry, ich vergesse, welche) gab es ein kurzes Beispiel für schlechte Webleistung in Form eines Widgets von Drittanbietern. Das Beispiel
Rezepte für Leistungstests einseitige Anwendungen in WebPagetestApr 15, 2025 am 09:42 AMWebPagetest ist ein Online -Tool und ein Open -Source -Projekt, mit dem Entwickler die Leistung ihrer Websites prüfen können. Als Webleistung Evangelist bei
Stoppen Sie Animationen während der Änderung der FenstergrößenApr 15, 2025 am 09:40 AMAngenommen, Sie haben eine Seite mit einer Reihe von Übergängen und Animationen zu allen möglichen Elementen. Einige von ihnen werden ausgelöst, wenn das Fenster verändert wird, weil sie
Ein Element über und unter ein anderes Element webenApr 15, 2025 am 09:38 AMIn diesem Beitrag werden wir CSS -Superkräfte verwenden, um einen visuellen Effekt zu erzielen, bei dem sich zwei Elemente überlappen und zusammenweben. Die Offenbarung für dieses Design kam
Gibt es zufällige Zahlen in CSS?Apr 15, 2025 am 09:37 AMMit CSS können Sie dynamische Layouts und Schnittstellen im Web erstellen, aber als Sprache ist es statisch: Sobald ein Wert festgelegt ist, kann er nicht geändert werden. Die Idee von
Schweben Element in der Mitte eines AbsatzesApr 15, 2025 am 09:36 AMSagen Sie, Sie möchten ein Bild (oder ein anderes Element) visuell in einen Textabsatz schweben. Aber wie ... in der Mitte des Absatzes, nicht richtig bei
Lassen Sie einen schicken, aber unkomplizierten Seitenloader machenApr 15, 2025 am 09:33 AMEs ist heutzutage ziemlich häufig, einen Ladezustand auf Websites zu sehen, insbesondere wenn progressive Web -Apps und reaktive Websites zunehmen. Es ist ein Weg zu
Die Landschaft der plattformübergreifenden App-EntwicklungApr 15, 2025 am 09:29 AMIch verfolge dieses Zeug nicht sehr gut, aber ich verstehe es. Wenn Sie eine native App für Android und iOS wünschen, wäre es sicher schön, sie nur einmal schreiben zu müssen
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
Dreamweaver CS6
Visuelle Webentwicklungstools
Sicherer Prüfungsbrowser
Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
MantisBT
Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.
WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools
