HTML | SoloLearn: Learn to code for FREE!

+5

HTML

How to create a vertical line in HTML?

4/25/2020 3:49:46 PM

Bahadur Arzimbetov

20 Answers

New Answer

+13

<hr /> <style> hr{ transform:rotate(90deg); } </style>

+6

<hr /> <style> hr{ transform:rotate(90deg) } </style>

+6

(You can create vertical line in HTML by this. Turn over <hr /> as 90 deg. ) i.e. <hr /> <style> hr{ transform:rotate(90deg) } </style>

+5

https://code.sololearn.com/WxxBUo3891Wq/?ref=app it took my 15mins work just joking it takes 2mins

+5

Bahadur Arzimbetov hello, Two ideas that doesn't mean to be exhaustive: 1-you could give border(left or right) to an element, example if you want the vertical line to be at the middle of your page: Put two div side by side with width 50%, on the first one apply: div1{ width:50%; height:300px; border: none; border-right:1px solid black; } div2{ width:50%; height:300px; border:none; } 2-you can use an <hr> element and use hr{ transform:rotateZ(90deg) ; position: relative (or absolute); top: to put it where you'd like; left: to put it where you'd like; } Maybe there are other ways...

+5

https://code.sololearn.com/W6bTxf927gdC/?ref=app css3 writing-mode is a valid way to do that More on it from here: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode P.S: I didn't read the question well, it will not work with hr but text

+4

You may find answer in https://www.geeksforgeeks.org/how-to-make-a-vertical-line-using-html/

+3

Thank you for helping!

+3

Of u need I word in one line then u could give less space in the div then it will automatically make it horizontal 🙂🙂

+3

Transfer hr tage 90 degre

+3

(Turn over <hr /> as 90 deg. ) For example:- <hr /> <style> hr{ transform:rotate(90deg) } </style>

+2

<hr /> <p> my school </p> <br /> Is a very nice school

+2

/* ..ali lives forever.. */ <style> .vl {   border-left: 6px solid green;   height: 500px; } </style> <div class="vl"></div>

+2

It is my first time when i speak English with people and it's not translated 😉

+1

I will show u

+1

Another option: You can use border left or right of a div on css

+1

Try it ........ <hr /> <style> hr{ transform:rotate(90deg) } </style>

+1

+1

<head> <style> hr { transform:rotate(90deg) } </style> </head> <body> <hr> </body>

+1

<hr /> <style> hr{ transform:rotate(90deg) } </style>