Fatal编程技术网
  • html/
  • html中有垂直规则吗？

html中有垂直规则吗？

html

html中有垂直规则吗？,html,Html,我知道html中有hr（水平规则），但我不相信有vr（垂直规则）。我错了吗？如果没有，为什么没有垂直规则呢？没有，它会去哪里 如果您需要类似的内容，请使用CSS在元素上添加边框。没有 为什么?？可能是因为有两列的表就可以了。由于内容布局的排版性质，HTML几乎没有垂直定位。垂直规则不符合其语义。不，没有垂直规则 编辑：现在是2021年（我回答这个问题十二年后），我不再认为我最初的解释是正确的： （原始解释） 有这样一个没有逻辑意义。HTML被解析 按顺序，这意味着您从上到下排列HTML代码， 从

我知道html中有hr（水平规则），但我不相信有vr（垂直规则）。我错了吗？如果没有，为什么没有垂直规则呢？

没有，它会去哪里

如果您需要类似的内容，请使用CSS在元素上添加边框。

没有

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

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

不，没有垂直规则

编辑：现在是2021年（我回答这个问题十二年后），我不再认为我最初的解释是正确的：

（原始解释）

有这样一个没有逻辑意义。HTML被解析 按顺序，这意味着您从上到下排列HTML代码， 从左到右您希望它从上到下、从左到右显示的方式 对（一般） vr标签并不遵循这种模式

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

如果我现在猜测为什么没有VR标签，我可能会把它作为一个线索：

HTML
元素表示 段落级元素：例如，故事中场景的变化， 或者在某一部分中转移话题

然而，在实践中，
标记通常用于语义以外的其他用途。尽管根据它在现实世界中的使用，似乎应该有一个
标记，但它可能与
标记的语义定义没有任何相似之处。人们可能从来没有想过要引入它

我的直觉是，创建者会建议这个问题的解决方案的领域是CSS，而不是HTML（这个问题的大多数答案都反映了这一点）

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

（我的旧答案如下所示）：

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

<div style="border-left:1px solid #000;height:500px"></div>
请注意，您需要指定高度或用内容物填充容器。

您可以通过两种方式完成：

  • 按照您在div中给出的方式创建样式，但将左边框更改为右边框
  • 拍摄一张图像，使其宽度为1-2像素
    • 那么：

    writing-mode:tb-rl
    顶部->底部，右侧->左侧的位置

    我们需要一个垂直的规则。你可以这样做：
    试试看，你就会知道自己：
    

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

    

    
罗肯
    
rkn
    rockon
    
岩石

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

    例如，考虑固定在屏幕顶部的水平导航菜单，类似于大多数窗口GUI应用程序中的菜单栏。您有几个从左到右排列的顶级菜单项，单击这些项可打开下拉菜单。几年前，使用单行表创建此列表是常见的做法，但这是糟糕的HTML，人们普遍认为正确的方法是使用大量定制的CSS列表
    
现在，假设您希望对类似的项目进行分组，但在分组之间添加一个垂直分隔符，以实现如下目的：
    

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

    
使用
    是可行的，但在更改该元素的实际用途时，可能会被认为在语义上不正确。此外，如果HTML DTD只允许内联级别的元素（例如
    元素），则不能在某些元素中使用此选项
    
更好的选择是
    ，但是并非所有浏览器都支持
    显示：内联块CSS属性，因此唯一真正的内联级别选项是使用如下图像：
    

    

    这还有一个额外的优点，即与纯文本浏览器（如lynx）兼容，因为显示的是管道字符而不是图像。（M$IE错误地使用alt text作为工具提示，这仍然让我恼火；这就是title属性的作用！）
    在列表项用作导航的上下文中，标记将非常有用。它不存在的原因是十年前在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>

    
.vr
{
显示：内联；
身高：100%；
宽度：1px；
边框：1张插图；
保证金：5px
}
垂直规则：&rarr&larr；

    

    试试看。
    您可以创建如下自定义标记：
    

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

    

    
虚拟现实{
显示：内联块；
//这是您设置标尺颜色的地方
背景色：黑色；
//这是您设置标尺宽度的位置
宽度：2倍；
//这是设置标尺和周围文本之间的间距的地方
保证金：0px 5px 0px 5px；
身高：100%；
垂直对齐：顶部；
}
这是更多的文本

    

    （如果有人知道一种方法，我可以将其转换为“开放式”标记，如
    ，请告诉我，我会在中编辑它）
    对于大多数桌面客户端，在HTML电子邮件中使用时，您必须使用表格。在这种情况下，您可以使用带有必要（但简单）内联样式的
    标记，如：
    

    <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解决了这个问题和它的工作grea

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

    

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

    

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

    

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

    

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

    

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

    

    var vr = document.registerElement('v-r'); // vertical rule please, yes!

    

    v-r {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

    

    js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>

    

     <h1>THIS<v-r></v-r>WORKS</h1>

    

    .vr {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

    

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