Het is eenvoudig genoeg om een horizontale lijn in html in te voegen of te tekenen. Maar hoe teken je een verticale lijn in html? In tegenstelling tot de horizontale lijn, is er geen enkele tag in html die de verticale lijn zal tekenen. Maar dat betekent niet dat het onmogelijk is om dat te doen.
CSS
een manier om dit te doen is door de html-tags te gebruiken met cascading style sheets of CSS.
We zullen de div-tag in html gebruiken om een blok in de pagina te tekenen. Op de DIV-tag kunt u de eigenschap border-left of border-right gebruiken om de randen van het blok te tekenen. In combinatie met de hoogte-eigenschap van de div, zult u uiteindelijk het tekenen van een verticale lijn van de gewenste lengte.
<style>.vertical { height: 300px; border-left: 2px solid black; position: absolute; left: 50%;}</style><div class="vertical"/>
- hoogte: de hoogte kan worden gebruikt om de lengte van de regel op de pagina te specificeren.
- rand-links: Dit is de specificeer wat voor soort lijn je leuk vindt. het voorbeeld is een effen zwarte lijn van 2 pixeldikte. U kunt stippellijnen of een veel dikkere lijn hebben.
- positie en links: Deze twee geven samen aan waar op de pagina de lijn horizontaal moet worden uitgelijnd. Elk van de attributen die de div op de juiste manier zullen plaatsen, kan worden gebruikt om de lijn op de pagina te plaatsen
De uitvoer van de bovenstaande code wordt weergegeven als een effen zwarte verticale lijn in het midden van de pagina.
Er zijn verschillende combinaties mogelijk. U kunt bijvoorbeeld zowel de eigenschappen rand-links als Rand-rechts gebruiken om twee verticale lijnen naast elkaar te tekenen. Zorg ervoor dat u de breedte van de div specificeert als u twee lijnen tekent. Dat zal de afstand tussen de twee verticale lijnen bepalen.
u kunt de grootte of dikte van de lijn variëren met behulp van het aantal pixels. Bijna alle variaties die je kunt gebruiken om een horizontale lijn te tekenen, kunnen ook worden gebruikt om de verticale lijn te tekenen.
het gebruik van een container tag zoals div geeft je ook de mogelijkheid om een verticale lijn naast een blok tekst te tekenen, als dat is wat je nodig hebt. Met behulp van een container tag geeft u de flexibiliteit om niet alleen verticale lijnen te tekenen, maar ook horizontale lijnen rond de tekst. Om dit te doen kun je zoiets als dit doen:
<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>
Ik heb het attribuut inline stijl gebruikt in de voorbeelden hier, maar idealiter zou u een extern style sheet gebruiken en u kunt gebruik deze met het class attribuut. Dat geeft u de mogelijkheid om consistente look en feel over al uw webpagina ‘ s.
met behulp van de hr-tag
de HTML-tag voor het invoegen van een horizontale lijn is de hr-tag. U kunt dezelfde tag ook gebruiken voor het invoegen van de verticale lijn, maar u moet nog steeds de breedte en grootte opgeven om de lijn te formatteren. Dus, alles wat je waarschijnlijk doet is het gebruik van de hr tag in plaats van de div tag in het eerdere voorbeeld.
toch kan het vrij eenvoudig te gebruiken zijn als je geen mooie opmaak nodig hebt. U specificeert het kenmerk breedte om de dikte van de lijn in te stellen en het kenmerk grootte om de lengte of hoogte van de lijn op te geven.
<hr width="1" size="300"/>
het gebruik van de div geeft u veel meer flexibiliteit bij het regelen van de grootte en het type van de lijn die u wilt tekenen en voor het tekenen van meerdere regels. Je zou de horizontale lijn op dezelfde manier kunnen tekenen, met de eigenschappen rand-boven of rand-onder in plaats van de links en rechts die we hadden gebruikt.