小开

没有，它会去哪里？

如果你想要类似的东西，可以使用 CSS 在元素上放置一个右边框。

小开

没有。

为什么? 可能是因为有两列的表就可以了。

小开

由于内容布局的排版特性，HTML 几乎没有垂直定位。垂直规则不符合它的语义。

小开

最佳答案

不，没有垂直规则。

编辑: 现在是2021年(我回答这个问题12年后) ，我不再认为我最初的解释是正确的:

(原文)

有一个 HTML 是没有逻辑意义的按顺序排列，意味着从上到下排列 HTML 代码, 从左到右按照您希望的方式从上到下显示，从左到右显示权利(一般而言) Vr 标记不遵循这种模式。

我不知道为什么从来没有引入 VR 标签，但可能不是因为 HTML 的解析方式——现在 HTML/CSS 中有许多不同的布局模式没有遵循这种“范式”。

如果我现在要推测为什么没有 VR 标签，我可能会把 MDN 对 HR 标记的定义作为一个线索:

HTML <hr>元素表示段落级元素: 例如，故事中场景的改变, 或者在一个部分中转移话题。

然而，在实践中，<hr>标签最终常常用于语义意义以外的用途。尽管看起来似乎是基于 <vr>标记在现实世界中的使用，但是它可能与 <hr>标记的语义定义没有任何相似之处。可能从来没有想过要介绍它。

我的直觉是，创建者会建议这个问题的解决方案的领域在 CSS 中，而不是 HTML (这个 SO 问题的大多数答案反映了这一点)。

Nixinova 的解决方案看起来是这个问题最优雅和现代的解决方案。

(以下是我以前的回答) :

然而，使用 CSS 很容易做到这一点。例如:

<div style="border-left:1px solid #000;height:500px"></div>

请注意，您需要指定一个高度或用内容填充容器。

小开

你可以用两种方法来做:

按照在 div 中已经给出的样式创建样式，但是将 border- 从左边界更改为 border- 从右边界更改
取一张图片，使其宽度为1-2px

小开

这个怎么样:

writing-mode:tb-rl

哪里顶-> 底部，右-> 左？

我们需要垂直规则。

小开

你可以像这样做一个垂直规则: <hr style="width: 1px; height: 20px; display: inline-block;">

小开

尝试一下，你就会知道你自己:

<body>
rokon<br />
rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br />
rocks
</body>
</html>

小开

正如其他人指出的那样，垂直规则的概念不符合 HTML 文档结构和表示背后的原始思想。然而，如今(尤其是随着网络应用的激增)有少数情况下，这确实是有用的。

例如，考虑一个固定在屏幕顶部的水平导航菜单，类似于大多数窗口 GUI 应用程序中的菜单栏。您有几个顶级菜单项从左到右排列，当点击打开下拉菜单。几年前，创建一个单行表是常见的做法，但这是糟糕的 HTML，而且人们普遍认为，正确的方法是使用定制化程度很高的 CSS 创建一个列表。

现在，假设你想对相似的项目进行分组，但是在分组之间添加一个垂直分隔符，就可以实现这样的效果:

[Item 1a] [Item 1b] | [Item 2a] [Item 2b]

使用 <hr style="width: 1px; height: 100%; ..." />是可行的，但是当您更改元素的实际用途时，可能会认为它在语义上是不正确的。此外，如果 HTML DTD 只允许内联级别的元素(例如，在 元素中) ，则不能在某些元素中使用这种方法。

一个更好的选择是 ，但是并不是所有的浏览器都支持 display: inline-block; CSS 属性，所以唯一真正的内联级别的选项是使用这样的图像:

<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />

这样做还有一个额外的好处，那就是与纯文本浏览器(如 lynx)兼容，因为显示的是管道字符而不是图像。(M $IE 错误地使用 alt 文本作为工具提示，这仍然让我很恼火; 这就是 title 属性的用途!)

小开

在使用列表项作为导航的上下文中，使用 < vr/> 标记会非常有用。它之所以不存在，是因为在十年前的 HTML 上下文中“拥有一个是没有逻辑意义的”。

小开

<style type="text/css">
.vr
{
display:inline;
height:100%;
width:1px;
border:1px inset;
margin:5px
}
</style>


<div style="font-size:50px">Vertical Rule: &rarr;<div class="vr"></div>&larr;</div>

试试看。

小开

您可以像这样创建一个自定义标记:

<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 电子邮件，必须使用表格。在这种情况下，您可以使用 <hr>标记，带有必要的(但是简单的)内联样式，如:

<hr width="1" size="50">

当然，CSS 样式更加灵活，但是 GMail 和类似的软件不允许使用任何 CSS 样式，除了内联..。

小开

HTML 中没有标记，但是可以使用 | 。

小开

你可以使用新的 HTML5 SVG 标签:

<svg style="position:absolute;width:100%;height:100%;">
<line id="myVerticalLine" y1="0" y2="100" x1="0" x2="0">
</line>
</svg>

小开

这是个古老的问题，但我用 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/

这个解决方案也不需要固定的高度。

小开

我发现很容易做一个 线的图像线的图像，然后把它作为一个“规则”插入到代码中，根据需要设置宽度和/或高度。这些都是水平规则图像，但没有什么能阻止我(或你)使用“垂直规则”图像。

这很酷，因为很多原因; 你可以很容易地使用不同的线条、颜色或图案作为“规则”，而且因为它们没有文本，即使你在 HTML 中使用 hr 的“正常”方式，它也不应该影响 SEO 或其他类似的东西。而且图像文件应该非常小(最多1或2KB)。

小开

不，没有，我会告诉你为什么没有，但首先, 快速解决方案:

A)对基本元素 span/div使用 CSS 类，例如: :

.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选择器我上面建议..。

小开

太多过于复杂的答案。只需使用 rowspan 创建一个 TableData 标记，该标记跨越您希望它跨越的行数。然后对实际的工具条使用右边框。

例如:

<td rowspan="5" style="border-right-color: #000000; border-right-width: thin; border-right-style: solid">&nbsp;</td>
<td rowspan="5">&nbsp;</td>

确保第二行中的“ & nbsp”运行的行数与第一行相同。这样两者之间才有适当的间距。

这种技术在我使用 HTML5的过程中起到了很好的作用。

小开

今天使用 CSS3是可能的

hr {
background-color:black;
color:black;
-webkit-transform:rotate(90deg);
position:absolute;
width:100px;
height:2px;
left:100px;
}

小开

您可以使用 css 来模拟垂直线，并使用 div 上的类

.vhLine {
border-left: thick solid #000000;
}

小开

试试这个。

您可以在“ Div”上设置高度和宽度，就像“ 组织”的作用域一样。

“ 组织”的边距用于对齐。

<div style="display: inline-flex; width: 25px; height: 100px;">
<hr style="margin: 0px 0px 0px 12.5px;">
</div>

小开

对于试图为文本创建列的用户，有一个列规则属性，您应该考虑使用它！

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

小开

我知道我加入我的答案非常晚，但这将是值得的，我敢肯定。可以使用 flex和 hr实现垂直线

看我的我是 Codepen。

小开

你可以很容易地做到这一点

hr{
transform: rotate(90deg);
}

<html>
<head>
</head>
<body>
<hr>
</body>
</html>

注意 hr 的高度和宽度

小开

<div style="width:1px;background-color:red;height:30px;float:right;"></div>

使用这样的 div 可以很容易地完成

小开

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;*/
}

参见上面的注释 * 。

连接到原始答案。

小开

在显示器内部设置 < hr > : flex 将使其垂直显示。

https://jsfiddle.net/w6y5t1kL/

例如:

<div style="display:flex;">
<div>
Content
<ul>
<li>Continued content...</li>
</ul>
</div>
<hr>
<div>
Content
<ul>
<li>Continued content...</li>
</ul>
</div>
</div>

在 html 中有一个 vr (垂直规则)吗？

关于 <vr> 很合适的故事在最初的范例中，但仍然不存在: