Wie vermeide ich Zeilenumbrüche bei der Verwendung von Tags?
Bei der Verwendung von Tags platzieren Browser die Elemente im Container normalerweise in der nächsten Zeile. Beispielsweise muss ein Programmierer den Titel in einer Zeile platzieren, um eine Navigationskomponente zu erstellen. Wir können Inline-, Inline-Block-, Flex-Box-Eigenschaften usw. verwenden, um neue Zeilen in Etiketten zu vermeiden.
In diesem Artikel erfahren Sie, wie Sie Zeilenumbrüche bei Beschriftungen durch Inline-Attribute, Flex-Box-Attribute usw. vermeiden.
Verwenden Sie Inline-Attribute
Eine beliebte Möglichkeit, Etikettenumbrüche zu vermeiden, ist die Verwendung des Inline-Attributs. Diese Eigenschaft erzwingt, dass die neue Zeile dieselbe bleibt wie die vorherige Zeile.
Beispiel
<!DOCTYPE html>
<html lang="en">
<style>
.first-container{
display: inline;
padding:2px;
padding:10px;
border: 2px solid orange;
}
.second-container{
display: inline;
padding: 10px;
border: 2px solid purple;
}
body{
padding:2vw;
}
</style>
<body>
<div class="first-container">
This is the first paragraph.
</div>
<div class="second-container">
This is the second paragraph.
</div>
</body>
</html>
Anleitung
HTML-Code erstellt eine einfache Webseite, die zwei Container „erster Container“ und „zweiter Container“ enthält. Die Polsterung des Körperelements beträgt 2 % der Breite des Ansichtsfensters.
Der „erste Container“ hat den Anzeigewert „inline“ mit einem orangefarbenen Rand und einer Auffüllung von 2 und 10 Pixeln. Es wird der Text „Dies ist der erste Absatz“ angezeigt. Der „zweite Container“ hat einen „Inline“-Anzeigewert mit einem violetten Rand und 10 Pixeln Abstand. Es wird der Text „Dies ist der zweite Absatz“ angezeigt. Die Container werden nebeneinander angezeigt und durch Textauffüllung getrennt.
Inline-Block-Attribut verwenden
Dies ähnelt der vorherigen Methode, ist jedoch anders.
Der Unterschied zwischen der Verwendung von Inline und Inline-Block ist wie folgt -
„Inline“-Elemente werden inline mit dem Text platziert und nehmen nur die erforderliche Breite ein. Sie erstellen keinen neuen Blockformatierungskontext und beginnen auch nicht in einer neuen Zeile, sodass sie keine Breite, Höhe oder Ränder festlegen können. Beispiele für Inline-Elemente sind das „span“-Tag und das „a“-Tag.
„Inline-Block“-Elemente ähneln „Inline“-Elementen, können jedoch Breite, Höhe und Ränder festlegen. Sie erstellen außerdem einen neuen Blockformatierungskontext, was bedeutet, dass sie Abstände, Ränder und Hintergrundfarben festlegen können. Sie werden jedoch weiterhin am Text ausgerichtet und beginnen nicht in einer neuen Zeile. Beispiele für Inline-Blockelemente sind Bilder mit definierten Abmessungen und Schaltflächen.
Beispiel
<!DOCTYPE html>
<html lang="en">
<style>
.first-container{
display: inline-block;
padding:3px;
padding:15px;
border: 3px solid rgb(0, 47, 255);
}
.second-container{
display: inline-block;
padding: 15px;
border: 3px solid rgb(92, 24, 42);
}
body{
padding:2vw;
}
</style>
<body>
<div class="first-container">
This is the first paragraph.
</div>
<div class="second-container">
This is the second paragraph.
</div>
</body>
</html>
Flexbox verwenden
Eine sehr beliebte Methode ist die Verwendung von Flexbox und seinen Tag-bezogenen Eigenschaften, um Zeilenumbrüche zu vermeiden.
Beispiel
<!DOCTYPE html>
<html lang="en">
<style>
.first-container {
padding: 3px;
padding: 15px;
border: 3px solid rgb(13, 108, 75);
}
.second-container {
padding: 15px;
border: 3px solid rgb(214, 59, 100);
}
.third-container {
padding: 15px;
border: 3px solid rgb(59, 59, 214);
}
body {
padding: 2vw;
}
.container {
display: flex;
flex-direction: row;
}
</style>
<body>
<div class="container">
<div class="first-container">This is the first element.</div>
<div class="second-container">This is the second element.</div>
<div class="third-container">This is the third element.</div>
</div>
</body>
</html>
Anleitung
Dieser HTML-Code erstellt eine einfache Webseite mit drei Containern, jeder mit einer anderen Klasse. Die Polsterung des Körperelements ist auf 2 % der Breite des Ansichtsfensters eingestellt. Die Elemente des ersten Containers, des zweiten Containers und des dritten Containers haben unterschiedliche Farben für Polsterung und Ränder.
Container werden in einem übergeordneten Container mit einer „Container“-Klasse platziert, die über die Stile display: flex und flex-direction: row verfügt. Dadurch wird das Containerelement auf einen Flex-Container festgelegt und die untergeordneten Elemente werden inline mit ihren eigenen Stilen und Auffüllungen angezeigt.
Fazit
In diesem Artikel erfahren Sie, wie Sie mithilfe von Tags Zeilenumbrüche vermeiden. Wir können Inline-, Inline-Block-, Flexbox-Attribute usw. verwenden, um Zeilenumbrüche zu vermeiden. Programmierer nutzen alle diese Methoden gleichermaßen.
Das obige ist der detaillierte Inhalt vonWie vermeide ich Zeilenumbrüche bei der Verwendung von Tags?. 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
1384
52
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?
Mar 20, 2025 pm 05:56 PM
In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.
Ist HTML für Anfänger leicht zu lernen?
Apr 07, 2025 am 12:11 AM
HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
Was ist ein Beispiel für ein Start -Tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.
