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

Question

我知道html中有一个hr(水平规则),但我不相信有一个vr(垂直规则).我错了,如果没有,为什么不存在纵向规则？

Answer 1

不,没有纵向规则.

拥有一个没有逻辑意义.HTML是按顺序解析的,这意味着您可以从上到下,从左到右的方式布局HTML代码,从左到右,从左到右(通常)

vr标签不遵循该范例.

但是,这很容易使用CSS.例如:

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

请注意,您需要指定高度或使用内容填充容器.

Answer 2

您可以制作这样的垂直规则: <hr style="width: 1px; height: 20px; display: inline-block;">

Answer 3

正如其他人所指出的,垂直规则的概念不符合HTML文档结构和表示背后的原始思想.然而,现在(特别是随着web-apps的激增),有一些场景确实很有用.

例如,考虑固定在屏幕顶部的水平导航菜单,类似于大多数窗口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属性的用途!)

Answer 4

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

试试看.

Answer 5

怎么样:

writing-mode:tb-rl

top-> bottom,right-> left？

我们需要垂直规则.

Answer 6

display：flex内的<hr>将使其垂直显示。

JSFiddle：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>