How to make a vertical line in HTML

Question

How do you make a vertical line using HTML

User · Accepted Answer

Put a  lt div gt  around the markup where you want the line to appear to next  and use CSS to style it    x000D   x000D   verticalLine   x000D    border-left  thick solid  ff0000  x000D    x000D   lt div class  verticalLine  gt  x000D    some other content x000D   lt  div gt  x000D   x000D   x000D

User · Answer

One more approach is possible   Using SVG   eg      lt svg height  210  width  500  gt       lt line x1  0  y1  0  x2  0  y2  100  style  stroke rgb 255 0 0  stroke-width 2    gt        Sorry  your browser does not support inline SVG   lt  svg gt    Pros      You can have line of any length and orientation  You can specify the width  color easily    Cons     SVG are now supported on most modern browsers  But some old browsers  like IE 8 and older  don t support it

User · Answer

I used a combination of the  hr  code suggested  and here s what my code looks like    lt hr style  width 0 5px  height 500px  position  absolute  left  315px    gt    I simply changed the value of the  left  pixel value to position it   I used the vertical line to line-up content on my webpage  and then I removed it

User · Answer

You can also make a vertical line using HTML horizontal line  lt hr   gt     x000D   x000D  html  body height  100    x000D   x000D  hr vertical   x000D    width  0px  x000D    height  100   x000D       or height in PX    x000D    x000D   lt hr class  vertical    gt  x000D   x000D   x000D

User · Answer

To create a vertical line centered inside a div I think you can use this code   The  container  may well be 100  width  I guess    x000D   x000D  div container   x000D    width  400px  x000D    x000D   x000D  div vertical-line   x000D    border-left  1px solid  808080  x000D    height  350px  x000D    margin-left  auto  x000D    margin-right  auto  x000D    width  1px  x000D    x000D   lt div class  container  gt  x000D     lt div class  vertical-line  gt  amp nbsp  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can draw a vertical line by simply using height   width with any html element    x000D   x000D   verticle-line   x000D    width  1px  x000D    min-height  400px  x000D    background  red  x000D    x000D   lt div id  verticle-line  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can use hr  horizontal line  tag and than rotate it 90 degree with css below  hr          transform rotate 90deg       -o-transform rotate 90deg       -moz-transform rotate 90deg       -webkit-transform rotate 90deg       http   jsfiddle net haykaghabekyan 0c969bm6 1

User · Answer

I think it is a simple way not do to anything more You can change border left or right according to your need  x000D   x000D   vertical-line  border-left 1px solid  000    x000D   lt span class  vertical-line  gt  lt  span x000D   x000D   x000D

User · Answer

To add a vertical line you need to style an hr   Now when you make a vertical line it will appear in the middle of the page    lt hr style  width 0 5px height 500px    gt    Now to put it where you want you can use this code    lt hr style  width 0 5px height 500px margin-left -500px margin-right 500px    gt    This will position it to the left  you can inverse it to position it to the right

User · Answer

I needed an inline vertical line  so I tricked a button into becoming a line    lt button type  button  class  v line  gt l lt  button gt    v line            width  0px           padding   5em  5px           background-color  black           margin  0px  4px

User · Answer

There is a  lt hr gt  tag for horizontal line  It can be used with CSS to make horizontal line also    x000D   x000D   divider  x000D      margin-left  5px  x000D      margin-right  5px  x000D      height  100px  x000D      width  1px  x000D      background-color  red  x000D    x000D   lt hr class  divider  gt  x000D   x000D   x000D    The width property determines the thickness of the line  The height property determines the length of the line  The background-color property determines the color of the line

User · Answer

If your goal is to put vertical lines in a container to separate side-by-side child elements  column elements   you could consider styling the container like this    container  gt    not  first-child      border-left  solid gray 2px      This adds a left border to all child elements starting from the 2nd child  In other words  you get vertical borders between adjacent children     gt  is a child selector  It matches any child of the element s  specified on the left    is a universal selector  It matches an element of any type   not  first-child  means it s not the first child of its parent    Browser support       first-child and  not    I think this is better than a simple  child-except-first  border-left       rule  because it makes more sense to have the vertical lines come from the container s rules  not the different child elements  rules   Whether this is better than using a makeshift vertical rule element  by styling a horizontal rule  etc   will depend on your use case  but this is an alternative at least

User · Answer

One other option is to use a 1-pixel image  and set the height - this option would allow you to float it to where you need to be   Not the most elegant solution though

User · Answer

Vertical line right to the div   x000D   x000D       lt div style  width 50   gt  x000D           lt div style  border-right 1px solid   gt  x000D               lt ul gt  x000D                   lt li gt  x000D                      Empty div didn t shows line x000D                   lt  li gt  x000D                   lt li gt  x000D                      Vertical line length depends on the content in the div x000D                   lt  li gt  x000D                   lt li gt  x000D                      Here I am using inline style  You can replace it by external style or internal style  x000D                   lt  li gt  x000D               lt  ul gt  x000D           lt  div gt  x000D       lt  div gt  x000D     x000D   x000D   x000D    Vertical line left to the div   x000D   x000D       lt div style  width 50   gt  x000D           lt div style  border-left 1px solid   gt  x000D               lt ul gt  x000D                   lt li gt  x000D                      Empty div didn t shows line x000D                   lt  li gt  x000D                   lt li gt  x000D                      Vertical line length depends on the content in the div x000D                   lt  li gt  x000D                   lt li gt  x000D                      Here I am using inline style  You can replace it by external style or internal style  x000D                   lt  li gt  x000D               lt  ul gt  x000D           lt  div gt  x000D       lt  div gt  x000D     x000D   x000D   x000D

User · Answer

For an inline style I used this code    lt div style  border-left 1px black solid  position absolute  left 50   height 300px     gt    and that positioned it directly in the center

User · Answer

You can use an empty  lt div gt  that is styled exactly like you want the line to appear   HTML    lt div class  vertical-line  gt  lt  div gt    With exact height  overriding style in-line     x000D   x000D    div vertical-line  x000D        width  1px     Line width    x000D        background-color  black     Line color    x000D        height  100      Override in-line if you want specific height     x000D        float  left     Causes the line to float to left of content   x000D          You can instead use position absolute or display inline-block x000D          if this fits better with your design    x000D        x000D   lt div class  vertical-line  style  height  45px   gt  lt  div gt  x000D   x000D   x000D    Style the border if you want 3D look    x000D   x000D      div vertical-line  x000D        width  0px     Use only border style    x000D        height  100   x000D        float  left   x000D        border  1px inset     This is default border style for  lt hr gt  tag    x000D        x000D      lt div class  vertical-line  style  height  45px   gt  lt  div gt  x000D   x000D   x000D    You can of course also experiment with advanced combinations    x000D   x000D    div vertical-line  x000D        width  1px  x000D        background-color  silver  x000D        height  100   x000D        float  left  x000D        border  2px ridge silver   x000D        border-radius  2px  x000D        x000D    lt div class  vertical-line  style  height  45px   gt  lt  div gt  x000D   x000D   x000D

User · Answer

There is no vertical equivalent to the  lt hr gt  element  However  one approach you may want to try is to use a simple border to the left or right of whatever you are separating    x000D   x000D   your col   x000D    border-left  1px solid black  x000D    x000D   lt div id  your col  gt  x000D    Your content here x000D   lt  div gt  x000D   x000D   x000D

User · Answer

In the Previous element after which you want to apply the vertical row   You can set CSS      border-right-width  thin  border-right-color  black  border-right-style  solid

User · Answer

Rotate a  lt hr gt  90 degrees    x000D   x000D   lt hr style  width 100px  transform rotate 90deg    gt  x000D   x000D   x000D

User · Answer

You can use the horizontal rule tag to create vertical lines    x000D   x000D   lt hr width  1  size  500  gt  x000D   x000D   x000D    By using minimal width and large size  horizontal rule becomes a vertical one

User · Answer

Why not use  amp  124  which is the html special character for

User · Answer

There isn t any tag to create a vertical line in HTML     Method  You load a line image  Then you set its style like  height  100px   width  2px   Method  You can use  lt td gt  tags  lt td style  border-left  1px solid red  padding  5px   gt  X  lt  td gt

User · Answer

HTML5 custom elements  or pure CSS   1  javascript Register your element  var vr   document registerElement  v-r       vertical rule please  yes    The - is mandatory in all custom elements  2  css v-r       height  100       width  1px      border-left  1px solid gray        display  inline-block              margin  0 auto        You might need to fiddle a bit with display inline-block inline because inline won t expand to containing element s height  Use the margin to center the line within a container  3  instantiate js  document body appendChild new vr     or HTML   lt v-r gt  lt  v-r gt    Unfortunately you can t create custom self-closing tags  usage   lt h1 gt THIS lt v-r gt  lt  v-r gt WORKS lt  h1 gt    example  http   html5 qry me vertical-rule  Don t want to mess with javascript  Simply apply this CSS class to your designated element  css  vr       height  100       width  1px      border-left  1px solid gray        display  inline-block              margin  0 auto        See notes above

User · Answer

To make the vertical line to center in the middle use   position  absolute   left  50

[html] How to make a vertical line in HTML

Examples related to html

Examples related to css