suchen

Heim >Web-Frontend >CSS-Tutorial >So entfernen Sie den Stil von Tags, die in CSS eine eigene Zeile belegen

So entfernen Sie den Stil von Tags, die in CSS eine eigene Zeile belegen

WBOY
WBOYOriginal
2021-11-24 17:35:544590Durchsuche

In CSS können Sie das Anzeigeattribut verwenden, um den Stil der Beschriftung zu eliminieren, die nur eine Zeile einnimmt. Wenn der Wert dieses Attributs „inline“ ist, wird die Beschriftung zu diesem Zeitpunkt so eingestellt, dass sie als Inline-Element angezeigt wird , es wird keine Zeilenumbrüche vor und nach der Beschriftung geben, daher ist sie nicht exklusiv. Eine Zeile; die spezifische Syntax ist „Labelelementobjekt {display:inline;}“.

So entfernen Sie den Stil von Tags, die in CSS eine eigene Zeile belegen

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So beseitigen Sie den Stil von Beschriftungen, die in CSS eine eigene Zeile belegen.

Der Grund, warum Beschriftungen eine eigene Zeile belegen, liegt darin, dass einige Beschriftungen Elemente auf Blockebene sind und Elemente auf Blockebene die gesamte Horizontale einnehmen Raum ihres übergeordneten Elements (Containers), vertikal Der Raum entspricht der Höhe seines Inhalts, sodass ein „Block“ erstellt wird. Wenn Sie verhindern möchten, dass die Beschriftung eine eigene Zeile einnimmt, müssen Sie die Beschriftung lediglich als Inline-Element festlegen und die Zeilenumbrüche vor und nach dem Element entfernen.

Zu diesem Zeitpunkt müssen Sie nur das Anzeigeattribut des Etiketts auf „Inline“ setzen, was bedeutet, dass dieses Element als Inline-Element angezeigt wird und es zuvor keine Zeilenumbrüche gibt und nach dem Element. Dadurch wird der Effekt beseitigt, dass die Beschriftung eine einzelne Zeile einnimmt.

Das Beispiel sieht wie folgt aus: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h3 class="h">测试标签</h3>
    测试文字
</body>
</html>

Ausgabeergebnis:

So entfernen Sie den Stil von Tags, die in CSS eine eigene Zeile belegen

Nach dem Hinzufügen von Stilen zum Etikett: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style type="text/css">
    .h{
        display:inline;
    }
</style>
<body>
    <h3 class="h">测试标签</h3>
    测试文字
</body>
</html>

Ausgabeergebnis:

So entfernen Sie den Stil von Tags, die in CSS eine eigene Zeile belegen

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo entfernen Sie den Stil von Tags, die in CSS eine eigene Zeile belegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 对象 display
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So brechen Sie das Auffüllen von Elementen in CSS abNächster Artikel：So brechen Sie das Auffüllen von Elementen in CSS ab

In Verbindung stehende Artikel

Mehr sehen