So entfernen Sie den Stil von Tags, die in CSS eine eigene Zeile belegen-CSS-Tutorial-php.cn

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

WBOY

Freigeben： 2021-11-24 17:35:54

Original

4562 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!