😊 🌱 ☀️   
    Blogseite.com



veröffentlicht am: 30. Mai 2024

HTML: Vertikale Linie erstellen – So gehts

 Home   ➡️  HTML  ➡️  HTML: Vertikale Linie erstellen – So gehts

Oft tritt das Problem auf eine Vertikale Linie in HTML zu erstellen. Eine Horizontale Linie ist kein Problem dafür gibt des den Befehl <hr>. Aber wie funktioniert dann eine Vertikale Linie?

Vertikale Linien werden zum Beispiel gebraucht, wenn du Link in Menüs voneinander Trennen möchtest.

Vertikale Linie mit dem <hr> Tag:

Das <hr>-Tag, auch als „horizontale Linie“-Tag bekannt, kann verwendet werden, um eine horizontale oder vertikale Linie zu erstellen. Indem Du das style-Attribut des <hr>-Tags auf display: block; height: 100%; width: 1px; setzt, kannst du es in eine vertikale Linie umwandeln.

HTML
<hr style="display: block; height: 100%; width: 1px;">

Vertikale Linie mit CSS:

CSS
.vertical-line {
  display: block;
  height: 100%;
  width: 1px;
  background-color: black; /* Oder eine beliebige Farbe */
}

HTML
<div class="vertical-line"></div>

Positionierung: Du kannst die CSS-Positionierungseigenschaften wie top, bottom, left und right verwenden, um die vertikale Linie genau an der gewünschten Stelle auf der Seite zu positionieren.

Styling: Auch das Erscheinungsbild der vertikalen Linie kannst du mithilfe von CSS-Eigenschaften wie border, margin und padding weiter anpassen.

Vertikale Linie mit CSS Beispiel 2

Um eine Vertikale Linie zu erstellen behelfen wir uns mit dem CSS Befehl border-right. Zuerst definieren wir uns einen Block mit einer gewissen Höhe und Breite.

Dieser DiV Container bekommt dann einen rechten Rand in der Farbe schwarz

HTML
<div class="vertikal"></div>

Und noch etwas CSS Zauberei und du hast deine Vertikale Linie.

CSS Code

CSS
  .vertikal{
    display:block;
    height:100px;
    weight:200px;
    border-right:1px solid black;
}

Gesamtcode

HTML
<!DOCTYPE html>
<html lang="de">
  <head>
  <style>
  .vertikal{
    display:block;
    height:100px;
    weight:200px;
    border-right:1px solid black;
}
</style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="vertikal"></div>
  </body>
</html>

Ergebnis

Vertikale Linie als Trennstrich

Ähnliche Beiträge


Über Mich


Weitere Beiträge auf Blogseite.com




Kennst du schon diese Memes?



Smiley Bedeutung