Wie kann ich mit CSS zwei Überschriften nebeneinander platzieren?

StackOverflow https://stackoverflow.com/questions/1294328

  •  18-09-2019
  •  | 
  •  

Frage 

<h5>Category</h5><h6>auto</h6>

setzt Kategorie und Auto Auf getrennten Zeilen wie diesem:

Kategorie

Auto

Wie kann ich sie beide in derselben Linie wie diese platzieren?

Kategorie Auto

War es hilfreich?

Lösung

H (n) Elemente sind "Block" -Elemente, was bedeutet, dass sie wachsen, um alle verfügbaren horizontalen Raum zu nutzen. Dies bedeutet auch, dass sie alles "Richtige" von ihnen in die nächste Zeile drücken werden.

Eine einfache Möglichkeit, dies zu erreichen, besteht darin, ihr Display inline zu setzen:

<style>
    h5, h6 {display:inline;}
</style>

Beachten Sie, dass inline-block ist nicht in allen Browsern unterstützt.

Sie können auch Blockelemente schweben, aber das kann zu einem klebrigen Problem werden, da das Schwimmen ziemlich komplex sein kann. Halten Sie sich für Fälle wie diese bei Inline.

Andere Tipps

<h5 style="display:inline-block;">Category</h5>
<h6 style="display:inline-block;">auto</h6>

Sie müssen den Anzeigemodus der Elemente ändern. H -Tags werden standardmäßig als Blockelemente gerendert. Um dieses Verhalten zu überschreiben

h5,h6 { display: inline; }

Sie können sich auch entscheiden, sie nebeneinander "schweben" zu lassen. Sie können das über:

h5,h6 { float: left; }

Bitte beachten Sie, dass das Gleit nur auf Blockelementen funktioniert (daher werden beider Stile keinen Schwimmer ausführen, da Inline -Elemente nicht schweben können).

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top