Es ist einfach genug, eine horizontale Linie in HTML einzufügen oder zu zeichnen. Aber wie zeichnet man eine vertikale Linie in HTML? Im Gegensatz zur horizontalen Linie gibt es in HTML kein einzelnes Tag, das die vertikale Linie zeichnet. Aber das bedeutet nicht, dass es unmöglich ist, dies zu tun.
CSS verwenden
Eine Möglichkeit, dies zu tun, besteht darin, die HTML-Tags mit Cascading Style Sheets oder CSS zu verwenden.
Wir werden das div-Tag in HTML verwenden, um einen Block auf der Seite zu zeichnen. Auf dem div-Tag können Sie die Eigenschaft border-left oder border-right verwenden, um die Ränder des Blocks zu zeichnen. In Kombination mit der height-Eigenschaft des div zeichnen Sie am Ende eine vertikale Linie der gewünschten Länge.
<style>.vertical { height: 300px; border-left: 2px solid black; position: absolute; left: 50%;}</style><div class="vertical"/>
- Höhe: Mit der Höhe kann die Länge der Zeile auf der Seite angegeben werden.
- border-left: dies ist die angeben, welche Art von Linie, die Sie mögen. das Beispiel ist eine durchgezogene schwarze Linie von 2 Pixeldicke. Sie können gestrichelte Linien oder eine viel dickere Linie haben.
- position und links: Diese beiden zusammen geben an, wo auf der Seite die Linie horizontal ausgerichtet werden soll. Jedes der Attribute, mit denen das div entsprechend platziert wird, kann verwendet werden, um die Zeile auf der Seite zu positionieren
Die Ausgabe des obigen Codes wird als durchgezogene schwarze vertikale Linie in der Mitte der Seite angezeigt.
Es sind verschiedene Kombinationen möglich. Sie können beispielsweise die Eigenschaften border-left und border-right zusammen verwenden, um zwei vertikale Linien nebeneinander zu zeichnen. Stellen Sie sicher, dass Sie die Breite des div angeben, wenn Sie zwei Linien zeichnen. Dadurch wird der Abstand zwischen den beiden vertikalen Linien bestimmt.
Sie können die Größe oder Dicke der Linie anhand der Pixelanzahl variieren. Fast alle Variationen, die Sie zum Zeichnen einer horizontalen Linie verwenden können, können auch zum Zeichnen der vertikalen Linie verwendet werden.
Wenn Sie ein Container-Tag wie div verwenden, können Sie auch eine vertikale Linie neben einem Textblock zeichnen, wenn Sie dies benötigen. Die Verwendung eines Container-Tags gibt Ihnen die Flexibilität, nicht nur vertikale Linien, sondern auch horizontale Linien um den Text zu zeichnen. Um dies zu tun, können Sie so etwas tun:
<div style="border-left: 2px solid black; border-right: 2px dashed green; width: 70em;"> <div style="padding-left: 2em;"> <p>The output of the above code will display as a solid black vertical line in the middle of the page.</p> <p>There are several different combinations that are possible. For example, you can use both the border-left and the border-right properties together to draw two vertical lines side by side. Be sure to specify the width of the div if you are drawing two lines. That will determine the distance between the two vertical lines.</p> <p>You can vary the size or thickness of the line using the pixel count. Almost all variations that you can use to draw a horizontal line can be used to draw the vertical line as well.</p> </div></div>
Ich habe das inline style Attribut in den Beispielen hier verwendet, aber idealerweise würden Sie ein externes Stylesheet verwenden und diese mit dem class Attribut wiederverwenden. Dies gibt Ihnen die Möglichkeit, ein konsistentes Erscheinungsbild auf allen Ihren Webseiten zu erzielen.
Verwendung des hr-Tags
Das HTML-Tag zum Einfügen einer horizontalen Linie ist das hr-Tag. Sie können dasselbe Tag auch zum Einfügen der vertikalen Linie verwenden, müssen jedoch weiterhin die Breite und Größe angeben, um die Linie zu formatieren. Alles, was Sie wahrscheinlich tun, ist, das hr-Tag anstelle des div-Tags im früheren Beispiel zu verwenden.
Dennoch kann es recht einfach zu bedienen sein, wenn Sie keine ausgefallene Formatierung benötigen. Sie geben das Attribut width an, um die Dicke der Linie festzulegen, und das Attribut size, um die Länge oder Höhe der Linie festzulegen.
<hr width="1" size="300"/>
Die Verwendung des div gibt Ihnen viel mehr Flexibilität bei der Steuerung der Größe und des Typs der Linie, die Sie zeichnen möchten, sowie beim Zeichnen mehrerer Linien. Nun, Sie könnten die horizontale Linie genauso zeichnen, indem Sie die Eigenschaften border-top oder border-bottom anstelle der von uns verwendeten Eigenschaften left und right .