发表新帖
发表新帖

Is there a vr (vertical rule) in html?

后端 未结
关注
28 2032
花落未央
花落未央 2020-12-02 11:37

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?

相关标签:
28条回答
  • 小蘑菇
    2020-12-02 12:09

    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: <v-r></v-r>

    *Unfortunately you can't create custom self-closing tags.

    usage

     <h1>THIS<v-r></v-r>WORKS</h1>

    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.

    0 讨论(0)
  • 滥情空心
    2020-12-02 12:10

    You could create a custom tag as such:

    <html>
<head>
<style>
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;
}
</style>
</head>
<body>
this is text <vr></vr> more text
</body>
</html>

    (If anyone knows a way that I could turn this into an "open-ended" tag, like <hr> let me know and I will edit it in)

    0 讨论(0)
  • 执念已碎
    2020-12-02 12:11

    There is no tag in HTML, but you can use |.

    0 讨论(0)
  • 没有蜡笔的小新
    2020-12-02 12:11

    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.: <span class="vr"></span>:

    .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 <vr> 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: <clear>. 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 <vr> 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 <vr>

    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...

    0 讨论(0)
  • 梦毁少年i
    2020-12-02 12:12

    you can do in 2 way :

    1. create style as you already gave in div but change border-left to border-right
    2. take a image and make its width 1-2 px
    0 讨论(0)
  • 借酒劲吻你
    2020-12-02 12:14

    Try it and you will know yourself:

    <body>
rokon<br />
rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br />
rocks
</body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题