Vertikale Linie in HTML erstellen

1. Verwenden Sie die CSS-Eigenschaft border-left, um eine vertikale Linie in HTML zu erstellen
2. Passen Sie das hr-Tag an, um eine vertikale Linie in HTML zu erstellen

In diesem Artikel werden einige Möglichkeiten zum Erstellen einer vertikalen Linie in HTML vorgestellt.

Verwenden Sie die CSS-Eigenschaft border-left, um eine vertikale Linie in HTML zu erstellen

In HTML verwenden wir das Tag hr, um eine horizontale Linie zu erstellen, aber es gibt kein Tag, um eine vertikale Linie zu erstellen. Wir können jedoch mit der CSS-Eigenschaft border-left eine vertikale Linie simulieren.

Die Eigenschaft border-left wird verwendet, um den Rand auf der linken Seite zu gestalten. Die Eigenschaft ist die Abkürzung für border-left width, border-left style und border-left color.

Wenn Sie nur die Eigenschaft border-left verwenden, wird eine vertikale Linie erstellt. Wir können einen Container in HTML erstellen, ihn auswählen und die Eigenschaft anwenden, um eine vertikale Linie zu erzielen.

Erstellen Sie beispielsweise ein div mit der Klasse v-line in HTML, wählen Sie dann v-line und wenden Sie einige Stile darauf an. Setzen Sie die Eigenschaft border-left auf thick solid #000.

Als nächstes stellen Sie die height auf 100% und left auf 50%. Setzen Sie abschließend die Eigenschaft position auf absolute.

Hier haben wir einen schwarzen Rand in der Mitte der Webseite. Auf diese Weise können wir mit der CSS-Eigenschaft border-left in HTML eine vertikale Linie erstellen.

Beispielcode:

<div class="v-line">
</div>

.v-line{
 border-left: thick solid #000;
 height:100%;
 left: 50%;
 position: absolute;
}

Passen Sie das hr-Tag an, um eine vertikale Linie in HTML zu erstellen

Wir können das hr-Tag optimieren und eine vertikale Linie in HTML erstellen.

Das Tag hr wird verwendet, um eine horizontale Linie zu erstellen. Wir können den Maximalwert für die height und den Minimalwert für die width des hr-Tags verwenden.

Auf diese Weise wird die Höhe der horizontalen Linie verlängert und die Breite schrumpft. Wir können dieselbe Farbe für die horizontale Linie und ihren Rand anwenden, damit sie vertikal aussieht.

Erstellen Sie beispielsweise ein hr-Tag in HTML. Setzen Sie in CSS die height des hr-Tags auf 100vh und die width auf .5vw.

Als nächstes stellen Sie die border-width auf 0. Stellen Sie zum Schluss color und background-color der Zeile auf #000.

Hier setzen wir den Wert 0 auf border-width, damit die vertikale Linie dünner wird. Auf diese Weise haben wir mit dem Tag hr in HTML eine vertikale Linie erstellt.

Beispielcode:

<hr>

hr{
 height:100vh;
 width:.5vw;
 border-width:0;
 color:#000;
 background-color:#000;
}