html 中有 vr（垂直规则）吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/571900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a vr (vertical rule) in html?
提问by Xaisoft
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?
我知道 html 中有 hr（水平规则），但我不相信有 vr（垂直规则）。我错了，如果没有，为什么没有垂直规则？
回答by Andy Baird
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)
拥有一个没有逻辑意义。HTML 是按顺序解析的，这意味着您将 HTML 代码从上到下、从左到右布置成您希望它从上到下、从左到右（通常）显示的方式
A vr tag does not follow that paradigm.
vr 标签不遵循该范例。
This is easy to do using CSS, however. Ex:
但是，使用 CSS 很容易做到这一点。前任：
<div style="border-left:1px solid #000;height:500px"></div>
Note that you need to specify a height or fill the container with content.
请注意，您需要指定高度或用内容填充容器。
回答by matt
You can make a vertical rule like this: <hr style="width: 1px; height: 20px; display: inline-block;">
您可以制定这样的垂直规则： <hr style="width: 1px; height: 20px; display: inline-block;">
回答by daiscog
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.
正如其他人指出的那样，垂直规则的概念与 HTML 文档的结构和表示背后的原始想法不符。然而，如今（尤其是随着网络应用程序的激增），在少数场景中这确实有用。
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.
例如，考虑固定在屏幕顶部的水平导航菜单，类似于大多数窗口 GUI 应用程序中的菜单栏。您有几个从左到右排列的顶级菜单项，单击时会打开下拉菜单。多年前，使用单行表创建它是一种常见的做法，但这是糟糕的 HTML，人们普遍认为正确的方法是使用高度自定义的 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 <hr style="width: 1px; height: 100%; ..." />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 <span>element).
使用<hr style="width: 1px; height: 100%; ..." />有效，但可能会被认为在语义上不正确，因为您正在更改该元素的实际用途。此外，您不能在 HTML DTD 仅允许行内级元素（例如，在一个<span>元素内）的某些元素中使用它。
A better option would be <span style="display: inline-block; width:1px; height:100%; background:#000; margin: 0 2px;"></span>, 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:
更好的选择是<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;" />
<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />
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!)
这具有与纯文本浏览器（如 lynx）兼容的额外优势，因为显示的是管道字符而不是图像。（M$IE 错误地使用 alt 文本作为工具提示，这仍然让我很恼火；这就是 title 属性的用途！）
回答by Veniamin Ilmer
<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>
Try it out.
试试看。
回答by vscpp
How about:
怎么样：
writing-mode:tb-rl
Where top->bottom, right->left?
上->下，右->左？
We will need vertical rule for this.
为此，我们需要垂直规则。
回答by Nixinova
An <hr> inside a display:flex will make it display vertically.
display:flex 中的 <hr> 将使其垂直显示。
JSFiddle: https://jsfiddle.net/w6y5t1kL/
JSFiddle：https://jsfiddle.net/w6y5t1kL/
Example:
例子：
<div style="display:flex;">
<div>
Content
<ul>
<li>Continued content...</li>
</ul>
</div>
<hr>
<div>
Content
<ul>
<li>Continued content...</li>
</ul>
</div>
</div>
回答by Chad Birch
There isn't, where would it go?
没有，去哪儿？
Use CSS to put a border-right on an element if you want something like that.
如果您想要类似的东西，请使用 CSS 在元素上放置一个边框。
回答by Chad Birch
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
- 创建您已经在 div 中给出的样式，但将 border-left 更改为 border-right
- 拍摄图像并使其宽度为 1-2 像素
回答by myroslav
HTML has little to no vertical positioning due to typographic nature of content layout. Vertical Rule just doesn't fit its semantics.
由于内容布局的排版性质，HTML 几乎没有垂直定位。垂直规则只是不符合其语义。
回答by muhammad rokonuzzaman
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>
