在HTML中有一个Vr（垂直规则）？
我知道在html中有一个hr（横向规则），但我不相信有一个vr（垂直规则）。 我错了，如果没有，为什么没有一个垂直的规则？
不，没有垂直的规则。
有一个是不合逻辑的。 HTML是按顺序parsing的，这意味着你从上到下，从左到右，从上到下，从左到右（一般地）显示你的HTML代码，
一个VR标签不遵循这个范例。
然而，使用CSS很容易。 例如：
<div style="border-left:1px solid #000;height:500px"></div> 请注意，您需要指定高度或填充容器的内容。
你可以像这样做一个垂直的规则： <hr style="width: 1px; height: 20px; display: inline-block;">
正如其他人指出的那样，纵向规则的概念并不符合HTML文档结构和呈现背后的原始思想。 但是，现在（尤其是在networking应用程序的激增），有一些情况确实很有用。
例如，考虑一个固定在屏幕顶部的水平导航菜单，类似于大多数窗口化的GUI应用程序中的菜单栏。 当点击打开下拉菜单时，您有几个从左到右排列的顶级菜单项。 几年前，通常的做法是用单行表格来创build这个表格，但这是不好的HTML，而且人们普遍认为，正确的方法是使用大量定制的CSS。
现在，假设你想分组类似的项目，但是在组之间添加一个垂直分隔符来实现这样的事情：
[Item 1a] [Item 1b] | [Item 2a] [Item 2b]
使用<hr style="width: 1px; height: 100%; ..." />有效的，但可能会被视为语义错误，因为您正在更改该元素的实际用途。 此外，您不能在HTML DTD只允许内联级元素的某些元素（例如<span>元素内）中使用此元素。
更好的select是<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;" />
这与显示pipe道字符而不是图像时兼容纯文本浏览器（如lynx）具有额外的优势。 （这仍然让我感到困惑，M $ IE不正确地使用ALT文本作为工具提示;这就是title属性的用处！）
<style type="text/css"> .vr { display:inline; height:100%; width:1px; border:1px inset; margin:5px } </style> <div style="font-size:50px">Vertical Rule: →<div class="vr"></div>←</div>
试试看。
怎么样：
writing-mode:tb-rl
顶部 – >底部，右侧 – >左侧？
我们需要这个垂直的规则。
没有，它会去哪里？
如果你想要类似的东西，可以使用CSS在元素上添加边框。
由于内容布局的印刷性，HTML几乎没有垂直定位。 垂直规则不符合其语义。
试试看，你会知道你自己：
<body> rokon<br /> rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br /> rocks </body> </html>
你可以用2种方法做：
- 创build风格，因为你已经在div中，但改变边界左边界的权利
- 采取形象，并使其宽度1-2像素
古代的问题，但我解决了这个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/
这个解决scheme也不需要固定的高度。
尝试这个。
你可以在“ div ”上设置高度和宽度，就像“ hr ”的范围一样。
“ hr ”的余量用于alignment。
<div style="display: inline-flex; width: 25px; height: 100px;"> <hr style="margin: 0px 0px 0px 12.5px;"> </div>
在用作导航的列表项的上下文中，<vr />标记将是非常有用的。 它不存在的原因是因为十年前在HTML的背景下，“在逻辑上不合逻辑”。
要在大多数桌面客户端的HTML电子邮件中使用，您必须使用表格。 在这种情况下，您可以使用<hr>标签，并使用必要（但很简单）的内联样式，如：
<hr width="1" size="50">
当然，使用CSS的样式更加灵活，但GMail和类似的不允许使用除内联以外的任何CSS样式。
您可以使用css来模拟垂直线，并使用div上的类
.vhLine { border-left: thick solid #000000; }
我知道我的答案很晚，但我相信这是值得的。 您可以使用flex和hr来实现垂直线
看到我的codepen在这里 。
你可以像这样创build一个自定义标签：
<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>让我知道，我会编辑它）
那没有。
为什么？ 可能是因为有两列的桌子可以。
HTML中没有标签，但可以使用|。
您可以使用新的HTML5 SVG标签：
<svg style="position:absolute;width:100%;height:100%;"> <line id="myVerticalLine" y1="0" y2="100" x1="0" x2="0"> </line> </svg>
我觉得很容易制作一个线条的图像 ，然后将其作为“规则”插入到代码中，根据需要设置宽度和/或高度。 这些都是水平规则图像，但没有什么能阻止我（或你）使用“垂直规则”的图像。
这很酷，有很多原因。 你可以很容易地使用不同的线条，颜色或模式作为“规则”，因为他们将没有文字，即使你已经做到了使用hr在HTML中的“正常”的方式，它不应该影响search引擎优化或其他的东西那。 图像文件将会/应该非常小（最多1或2KB）。
太复杂的答案太多了。 只需制作一个TableData标签，它跨越你想要使用rowspan的行数。 然后使用实际栏的右边框。
例：
<td rowspan="5" style="border-right-color: #000000; border-right-width: thin; border-right-style: solid"> </td> <td rowspan="5"> </td>
确保第二行中的“＆nbsp”与第一行中的行数相同。 所以两者之间有适当的间距。
这个技巧让我在HTML5中度过了愉快的时光。
今天是可能的CSS3
hr { background-color:black; color:black; -webkit-transform:rotate(90deg); position:absolute; width:100px; height:2px; left:100px; }
对于试图为文本创build列的用户 ，您应该考虑使用列规则属性！
.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>
不，那里没有。 我会告诉你一个小故事，为什么不是。 但首先， 快速解决scheme：
a）使用基本元素span / div CSS类，例如： <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-childselect器。
原始范式中的“ 适配 ”的故事，
但仍然不在那里：
这里的许多答案都表明，垂直分隔符不适合原始的HTML范例/方法……这是完全错误的。 同样的答案自相矛盾。
那些同样的人可能正在调用他们清晰的CSS类“clearfix” – 关于浮动没有什么可以解决的，你只是清除它… HTML3中甚至有一个元素： <clear> 。 可悲的是，这个和浮动的清除是less数常见的误解之一。
无论如何。 在“原始HTML时代”的“当时”，没有任何像inline-block想法，只有blocks ，内inlines和tables 。
最后一个实际上是<vr>不存在的原因。
那时候有人认为：
如果你想垂直划分一些东西和/或从左向右多个块=>
=>您正在创build/想要创build列=>
=>这意味着你正在创build一个表=>
=>表格的单元格之间有自然边界=> 没有理由创build一个<vr>
这种方法实际上仍然有效，但是随着时间的推移，表格的语法不适合每一种情况，也不适用于默认的样式。
另一种可能是后来的假设是， 如果你不创build表，你可能是浮动块元素 。 这意味着他们粘在一起 ，再次，你可以设置一个边界 ，那些日子甚至可能使用:first-child我build议上面的:first-childselect…
