Is there a vr vertical rule in html

Question

I know there is a hr  horizontal rule  in html  but I don t believe there is a vr  vertical rule    Am I wrong and if not  why isn t there a vertical rule

User · Answer

In the context of a list item being used as navigation a  lt vr    tag would be perfectly useful   The reason it does not exist is because  It does not make logical sense to have one  in the context of HTML a decade ago

User · Answer

You can use css for simulate a vertical line  and use the class on the div   vhLine     border-left  thick solid  000000

User · Answer

You could create a custom  tag as such    lt html gt   lt head gt   lt style gt  vr   display  inline-block     This is where you d set the ruler color background-color  black     This is where you d set the ruler width width  2px    this is where you d set the spacing between the ruler and surrounding text margin  0px 5px 0px 5px  height  100   vertical-align  top     lt  style gt   lt  head gt   lt body gt  this is text  lt vr gt  lt  vr gt  more text  lt  body gt   lt  html gt     If anyone knows a way that I could turn this into an  open-ended  tag  like  lt hr gt  let me know and I will edit it in

User · Answer

you can do in 2 way     create style as you already gave in div but change border-left to border-right take a image and make its width 1-2 px

User · Answer

I know I am adding my answer very late  but it would be worth I am sure  You can achieve vertical line using flex and hr  See my codepen here

User · Answer

I find it easy to make an image of a line  and then insert it into the code as a  rule   setting the width and or height as needed   These have all been horizontal-rule images  but there s nothing stopping me  or you  from using a  vertical-rule  image    This is cool for many reasons  you can use different lines  colors  or patterns easily as  rules   and since they would have no text  even if you had done it the  normal  way using hr in HTML  it shouldn t impact  SEO or other stuff like that  And the image file would should be very tiny  1 or 2KB at most

User · Answer

For people who re trying to make columns for text  there s a column-rule property which you should consider using    x000D   x000D   content  x000D    margin  20px 5   x000D    padding  5px  x000D     x000D    x000D   content p  x000D    -webkit-column-count  3  x000D    -moz-column-count 3  x000D    -o-column-count 3  x000D    column-count  3   x000D    -webkit-column-rule  1px solid  ccc  x000D    -moz-column-rule  1px solid  ccc  x000D    -o-column-rule  1px solid  ccc  x000D    column-rule  1px solid  ccc  x000D    x000D    text-align  justify  x000D    x000D   lt div class  content  gt  x000D     lt p gt  x000D      Lorizzle ipsum tellivizzle sit amizzle  consectetizzle adipiscing elit  Nullam away things  shizznit stuff  suscipizzle shiz  gravida vizzle  funky fresh  Doggy phat tortizzle  Check it out its fo rizzle  Bizzle izzle shizzle my nizzle crocodizzle dapibus turpizzle tempizzle i m in the shizzle  Mauris gizzle nibh et ghetto  Vestibulum ass phat  Pellentesque eleifend nizzle nisi  Fo shizzle my shizz shiznit fo shizzle dizzle  Donec dapibus  That s the shizzle uhuh     yih  urna  pretium eu  mattizzle cool  shit things  nunc  Fizzle suscipizzle  Shizzlin dizzle semper daahng dawg boofron bow wow wow  x000D   x000D   x000D   x000D     lt  p gt  x000D     x000D     x000D   lt  div gt  x000D   x000D   x000D

User · Answer

No there is not  And I will tell you a little story on why it is not  But first  quick solutions   a  Use CSS class for basic elements span div  e g    lt span class  vr  gt  lt  span gt     vr      display  inline-block      vertical-align  middle         note that height must be precise  100  does not work in some major browsers       height  100px      width  1px      background-color   000      Demonstration of use    https   jsfiddle net fe3tasa0   b  Make a use of a one-side-only border and possibly CSS  first-child selector if you want to apply a general dividers among sibling neigbour elements   The story about  lt vr gt  FITTING in the original paradigm but still not being there   Many answers here suggest  that vertical divider does not fit the original HTML paradigm approach     that is completely wrong  Also the answers contradict themselves a lot   Those same people are probably calling their clear CSS class  clearfix  - there is nothing to fix about floating  you are just clearing it     There was even an element in HTML3   lt clear gt   Sadly  this and clearance of floating is one of the few common misconceptions   Anyway   Back then  in the  original HTML ages   there was no thought about something like inline-block  there were just blocks  inlines and tables    The last one is actually the reason why  lt vr gt  does not exist  Back then it was assumed that  If you want to verticaly divide something and or make more blocks from left to right       you are making want to make columns       that implies you are creating a table       tables have natural borders between their cells    no reason to make a  lt vr gt   This approach is actually still valid  but as time showed  the syntax made for tables is not suitable for every case as well as it s default styles    Another  probably later  assumption was that if you are not creating table  you are probably floating block elements  That meaning they are sticking together  and again  you can set a border  and those days probably even use the  first-child selector I suggested above

User · Answer

You can very easily do this by    x000D   x000D  hr  x000D   transform  rotate 90deg   x000D    x000D   lt html gt  x000D   lt head gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt hr gt  x000D   lt  body gt   x000D   lt  html gt  x000D   x000D   x000D   Be careful about the height and width of hr

User · Answer

lt style type  text css  gt   vr     display inline    height 100     width 1px    border 1px inset    margin 5px    lt  style gt    lt div style  font-size 50px  gt Vertical Rule   amp rarr  lt div class  vr  gt  lt  div gt  amp larr  lt  div gt    Try it out

User · Answer

You can make a vertical rule like this   lt hr style  width  1px  height  20px  display  inline-block   gt

User · Answer

There is not    Why  Probably because a table with two columns will do

User · Answer

lt div style  width 1px background-color red height 30px float right   gt  lt  div gt    Easily can be done using a div like this

User · Answer

No  there is no vertical rule   It does not make logical sense to have one  HTML is parsed sequentially  meaning you lay out your HTML code from top to bottom  left to right how you want it to appear from top to bottom  left to right  generally   A vr tag does not follow that paradigm   This is easy to do using CSS  however  Ex    lt div style  border-left 1px solid  000 height 500px  gt  lt  div gt    Note that you need to specify a height or fill the container with content

User · Answer

You could use the new HTML5 SVG tag     lt svg style  position absolute width 100  height 100    gt       lt line id  myVerticalLine  y1  0  y2  100  x1  0  x2  0  gt       lt  line gt   lt  svg gt

User · Answer

Too many overly-complicated answers   Just make a TableData tag that spans how many rows you want it to using rowspan  Then use the right-border for the actual bar   Example    lt td rowspan  5  style  border-right-color   000000  border-right-width  thin  border-right-style  solid  gt  amp nbsp  lt  td gt   lt td rowspan  5  gt  amp nbsp  lt  td gt    Ensure that the   amp nbsp  in the second line runs the same amount of lines as the first  so that there s proper spacing between both   This technique has served me rather well with my time in HTML5

User · Answer

There is no  tag in HTML  but you can use

User · Answer

As pointed out by others  the concept of a vertical rule does not fit in with the original ideas behind the structure and presentation of HTML documents  However  these days  especially with the proliferation of web-apps  there are is a small number of scenarios where this would indeed be useful   For example  consider a horizontal navigation menu fixed at the top of the screen  similar to the menu-bar in most windowed GUI applications   You have several top-level menu items arranged from left-to-right which when clicked open up drop-down menus   Years ago  it was common practice to create this with a single-row table  but this is bad HTML and it is widely recognised that the correct way to go would be a list with heavily customised CSS   Now  say you want to group similar items  but add a vertical separator in between groups  to achieve something like this    Item 1a   Item 1b     Item 2a   Item 2b    Using  lt hr style  width  1px  height  100          gt  works  but may be considered semantically incorrect as you are changing what that element is actually for   Furthermore  you can t use this within certain elements where the HTML DTD allows only inline-level elements  e g  within a  lt span gt  element    A better option would be  lt span style  display  inline-block  width 1px  height 100   background  000  margin  0 2px   gt  lt  span gt   however not all browsers support the display  inline-block  CSS property  so the only real inline-level option is to use an image like so    lt img src  pixel gif  alt     style  width 1px  height 100   background  000  margin  0 2px     gt   This has the added advantage of being compatible with text-only browsers  like lynx  as the pipe character is displayed instead of the image    It still annoys me that M IE incorrectly uses alt text as a tooltip  that s what the title attribute is for

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    link to original answer on SO

User · Answer

There isn t  where would it go   Use CSS to put a border-right on an element if you want something like that

User · Answer

HTML has little to no vertical positioning due to typographic nature of content layout  Vertical Rule just doesn t fit its semantics

User · Answer

For use in HTML email for most desktop clients you have to use tables  In this case  you can use  lt hr gt  tag  with necessary  but simple  inline styling  like    lt hr width  1  size  50  gt    Of course that styling with CSS is more flexible  but GMail and similar don t allow using of any CSS styling other than inline

User · Answer

An  lt hr gt  inside a display flex will make it display vertically   JSFiddle  https   jsfiddle net w6y5t1kL   Example    lt div style  display flex   gt     lt div gt      Content      lt ul gt         lt li gt Continued content    lt  li gt       lt  ul gt     lt  div gt     lt hr gt     lt div gt      Content      lt ul gt         lt li gt Continued content    lt  li gt       lt  ul gt     lt  div gt   lt  div gt

User · Answer

Try this   You can set height and width on  div   like the scope for  hr    The margin of  hr  is used to alignment    x000D   x000D   lt div style  display  inline-flex  width  25px  height  100px   gt  x000D     lt hr style  margin  0px 0px 0px 12 5px   gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Try it and you will know yourself    lt body gt  rokon lt br   gt  rkn  lt hr style  width  1px  height  10px  display  inline  margin-left  2px  margin-right  2px     gt rockon lt br   gt  rocks  lt  body gt   lt  html gt

User · Answer

Ancient question but I solved this with display flex  and it works great    lt div style  display flex border 1px dotted black margin-bottom 20px   gt       lt div gt          This is a div      lt  div gt       lt div style  border-left 1px solid black margin 0 7 5px   gt  lt  div gt       lt div gt          This is another div      lt  div gt     lt  div gt    https   jsfiddle net 6qfd59vm 3   This solution also doesn t require fixed height

User · Answer

How about   writing-mode tb-rl   Where top- bottom  right- left   We will need vertical rule for this

User · Answer

Today is possible with CSS3  hr     background-color black    color black    -webkit-transform rotate 90deg     position absolute    width 100px    height 2px    left 100px

[html] Is there a vr (vertical rule) in html?

Examples related to html