Heim > Artikel > Web-Frontend > Wie vermeide ich Zeilenumbrüche bei der Verwendung von Tags?
Wie vermeide ich Zeilenumbrüche bei der Verwendung von Tags?
- WBOYnach vorne
- 2023-09-02 22:05:06646Durchsuche
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!