html中是否有vr（垂直规则）？
Answers:
不，没有垂直的规则。
拥有一个没有逻辑意义。HTML是按顺序分析的，这意味着您要从上到下，从左到右排列您的HTML代码，从上到下，从左到右（通常）显示
vr标签不遵循该范例。
但是，使用CSS很容易做到这一点。例如：
<div style="border-left:1px solid #000;height:500px"></div>请注意，您需要指定高度或将内容填充到容器中。
正如其他人指出的那样，垂直规则的概念与HTML文档的结构和表示形式背后的原始思想不符。但是，这些天（尤其是随着Web应用程序的普及）在少数情况下确实有用。
例如，考虑固定在屏幕顶部的水平导航菜单，类似于大多数窗口化GUI应用程序中的菜单栏。您具有从左到右排列的几个顶级菜单项，单击这些菜单项可打开下拉菜单。几年前，通常的做法是使用单行表创建此表，但这是不好的HTML，并且众所周知，正确的方法是使用高度自定义的CSS列表。
现在，假设您要对相似的项目进行分组，但要在各组之间添加一个垂直分隔符，以实现以下目的：
[Item 1a] [Item 1b] | [Item 2a] [Item 2b]使用<hr style="width: 1px; height: 100%; ..." />作品，但在您更改该元素的实际用途时，可能会在语义上被认为是错误的。此外，您不能在HTML DTD仅允许内联级别的元素（例如，在<span>元素内）中的某些元素中使用此功能。
更好的选择是<span style="display: inline-block; width:1px; height:100%; background:#000; margin: 0 2px;"></span>，但是并非所有浏览器都支持display: inline-block;CSS属性，因此唯一真正的内联级别选项是使用如下图像：
<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />
由于具有管道字符而不是图像，因此具有与纯文本浏览器（如lynx）兼容的附加优点。（这仍然让我感到烦恼的是，M $ IE错误地使用alt文本作为工具提示；这就是title属性的作用！）
怎么样：
writing-mode:tb-rl顶部->底部，右侧->左侧？
为此，我们将需要垂直规则。
尝试一下，您将了解自己：
<body>
rokon<br />
rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br />
rocks
</body>
</html>古老的问题，但是我用来解决了display:flex;，并且效果很好：
<div style="display:flex;border:1px dotted black;margin-bottom:20px;">
<div>
This is a div
</div>
<div style="border-left:1px solid black;margin:0 7.5px;"></div>
<div>
This is another div
</div>
</div>https://jsfiddle.net/6qfd59vm/3/
此解决方案也不需要固定高度。
在将列表项用作导航的上下文中，<vr />标记将非常有用。它不存在的原因是因为十年前在HTML上下文中“拥有一个逻辑上不合逻辑”。
您可以使用CSS模拟一条垂直线，并在div上使用该类
.vhLine {
border-left: thick solid #000000;
}HTML5 自定义元素（或纯CSS）
1. JavaScript
注册您的元素。
var vr = document.registerElement('v-r'); // vertical rule please, yes!* -在所有自定义元素中都是必填项。
2. CSS
v-r {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}*您可能需要摆弄一些东西，display:inline-block|inline因为它inline不会扩展到包含元素的高度。使用边距使线在容器内居中。
3.实例化
js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>*很遗憾，您无法创建自定义自动关闭标签。
用法
<h1>THIS<v-r></v-r>WORKS</h1>
例如：http：//html5.qry.me/vertical-rule
不想惹JavaScript？
只需将此CSS类应用于您指定的元素。
的CSS
.vr {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}*请参阅上面的注释。
链接到SO的原始答案。
您可以这样创建一个自定义标签：
<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>（如果有人知道我可以将其变成“开放式”标签的方式，例如<hr>让我知道，我将对其进行编辑）
<vr />
对于试图为文本创建列的人，您应该考虑使用column-rule属性！
.content{
margin: 20px 5%;
padding: 5px;
}
.content p{
-webkit-column-count: 3;
-moz-column-count:3;
-o-column-count:3;
column-count: 3;
-webkit-column-rule: 1px solid #ccc;
-moz-column-rule: 1px solid #ccc;
-o-column-rule: 1px solid #ccc;
column-rule: 1px solid #ccc;
text-align: justify;
}<div class="content">
<p>
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.
</p>
</div>不，那里没有。我会告诉你一个为什么没有的小故事。但首先， 快速解决方案：
a）将CSS类用于基本元素span/ div，例如<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;
}使用演示=> https://jsfiddle.net/fe3tasa0/
b）利用单边边框和CSS:first-child如果您想在同级/近邻元素之间应用通用分隔线，选择器。
关于在原始范式中进行<vr> 拟合的故事，
但仍然没有出现：
这里有许多答案表明，垂直分隔符不适合原始的HTML范式/方法...这是完全错误的。 答案也彼此矛盾。
那些人可能将其清晰的CSS类称为“ clearfix”-浮动没有任何可修复的地方，您只是清除了它……HTML3中甚至还有一个元素：<clear>。可悲的是，这和浮动的清除是为数不多的常见误解之一。
无论如何。“那时候”，在“原始的HTML时代”，有没有关于类似的思想inline-block，有刚blocks，inlines和tables。
最后一个实际上<vr>是不存在的原因。
当时的假设是：
如果您想垂直划分对象和/或从左到右制作更多块=>
=>您正在/想要创建列=>
=>则意味着您正在创建表=>
= >表格在其单元格之间具有自然边界=> 没有理由<vr>
这种方法实际上仍然有效，但是正如时间所表明的那样，表的语法并不适合所有情况，也不适合默认样式。
另一个可能是在以后的假设是，如果不创建表，则可能是浮动块元素。这意味着他们在一起，然后又可以设置边框，而那些日子可能甚至使用
:first-child我上面建议的选择器...