html中有vr（垂直规则）吗？

时间：2009-02-21 01:38:15

标签： html

我知道html中有一个hr（横向规则），但我不相信有一个vr（垂直规则）。我错了，如果没有，为什么不存在垂直规则？

28 个答案:

答案 0 :(得分：145)

不，没有纵向规则。

拥有一个没有逻辑意义。 HTML是按顺序解析的，这意味着您可以从上到下，从左到右排列HTML代码，从上到下，从左到右（通常）显示

vr标签不遵循该范例。

然而，这很容易使用CSS。例如：

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

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

答案 1 :(得分：33)

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

答案 2 :(得分：15)

正如其他人所指出的，垂直规则的概念不符合HTML文档结构和表示背后的原始思想。然而，现在（特别是随着网络应用程序的激增），有一些场景确实会有用。

例如，考虑固定在屏幕顶部的水平导航菜单，类似于大多数窗口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错误地使用替代文字作为工具提示;这就是title属性的用途！）

答案 3 :(得分：8)

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

尝试一下。

答案 4 :(得分：7)

怎么样：

writing-mode:tb-rl

top-＆gt; bottom，right-＆gt; left？

我们需要垂直规则。

答案 5 :(得分：5)

没有，它会去哪里？

如果你想要这样的话，可以使用CSS在一个元素上放置一个右边界。

答案 6 :(得分：3)

display：flex内的

将使其垂直显示。

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>

答案 7 :(得分：2)

尝试一下，你就会了解自己：

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

答案 8 :(得分：2)

你可以用2种方式做：

  1. 创建您已在div中提供的样式，但将border-left更改为border-right
  2. 拍摄图像并使其宽度为1-2像素

答案 9 :(得分：2)

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

答案 10 :(得分：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/

此解决方案也不需要固定高度。

答案 11 :(得分：2)

我知道我很晚才补充答案，但我确信这值得。您可以使用flex和hr

来实现垂直线

查看我的codepen here。

答案 12 :(得分：2)

试试这个。

您可以在＆＃34; div ＆＃34;上设置高度和宽度，例如＆＃34; hr ＆＃34;的范围。

＆＃34; hr ＆＃34;用于对齐。

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

答案 13 :(得分：1)

在用作导航的列表项的上下文中，＆lt; vr /＆gt;标签将非常有用。它不存在的原因是因为“十年前在HTML环境中”拥有一个“没有逻辑意义。”

答案 14 :(得分：1)

对于大多数桌面客户端的HTML电子邮件，您必须使用表格。在这种情况下，您可以使用<hr>标记，以及必要（但简单）的内联样式，例如：

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

当然，使用CSS的样式更灵活，但GMail和类似的不允许使用除内联之外的任何CSS样式...

答案 15 :(得分：1)

您可以通过

轻松完成此操作 

hr{
 transform: rotate(90deg);
}
<html>
<head>
</head>
<body>
<hr>
</body> 
</html>
注意hr

的高度和宽度

答案 16 :(得分：1)

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

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

答案 17 :(得分：0)

HTML5 custom elements（或纯CSS）

enter image description here

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>

enter image description here

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

*请参阅上面的注释。

链接到original answer on SO。

答案 18 :(得分：0)

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

可以使用像这样的div轻松完成

答案 19 :(得分：0)

您可以使用新的HTML5 SVG代码：

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

答案 20 :(得分：0)

对于尝试为文字制作列的人，有一个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>

答案 21 :(得分：0)

今天可以使用CSS3 

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

答案 22 :(得分：0)

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

示例：

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

确保第二行中的“＆amp; nbsp”与第一行中的“＆amp; nbsp”行数相同。这样两者之间就有适当的间距。

这项技术对我在HTML5中的时间非常有用。

答案 23 :(得分：0)

我发现制作一行图像很容易，然后将其作为“规则”插入代码中，根据需要设置宽度和/或高度。这些都是水平规则图像，但没有什么能阻止我（或你）使用“垂直规则”图像。

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

答案 24 :(得分：0)

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

答案 25 :(得分：0)

您可以创建自定义标记：

<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>让我知道，我会在其中进行编辑）

答案 26 :(得分：0)

没有。

为什么呢？可能是因为有两列的表会这样做。

答案 27 :(得分：-2)

不，没有。我会告诉你一个关于它为什么不是的故事。但首先， 快速解决方案：

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

使用证明=＆gt; https://jsfiddle.net/fe3tasa0/

b）如果要在兄弟/邻居元素中应用一般分隔符，请使用仅限单边的边框和可能的CSS :first-child选择器。

原始范例中<vr> FITTING 的故事，但仍未存在：

这里的许多答案都表明，垂直分隔符不符合原始的HTML范例/方法 ......这是完全错误的。 这些答案也很自相矛盾。

那些人可能正在调用他们清晰的CSS类＆＃34; clearfix＆＃34; - 没有什么可以解决浮动问题，你只是清除它...... HTML3中甚至还有一个元素：<clear>。可悲的是，这和浮动的清除是为数不多的常见错误观念之一。

反正。 ＆＃34;当时＆＃34;在＆＃34;原始HTML时代＆＃34;中，没有考虑inline-block这样的内容，只有 blocks ， inlines 和 tables 。

最后一个实际上是<vr>不存在的原因。
当时人们认为：
如果你想垂直划分某些东西和/或从左到右制作更多的块=＆gt;
=＆GT;你正在制作/想要制作列=＆gt;
=＆GT;这意味着你正在创建一个表=＆gt;
=＆GT;表格在其单元格之间有自然边界=＆gt; 无理由制作<vr>

这种方法实际上仍然有效，但是随着时间的推移，表格的语法并不适用于所有情况以及它的默认样式。

<小时/> 另一个，可能是后来的假设是如果你不创建表，你可能是浮动块元素。这意味着他们将粘在一起，再次，你可以设置边框，那些日子甚至可能使用我上面提到的:first-child选择器... < p>

相关问题
最新问题