问题描述

如何使用 HTML 进行垂直线？

最佳解决方案

将<div> 放在您希望线条显示到下一个标记的地方，并使用 CSS 对其进行风格化：



.verticalLine {
  border-left: thick solid #ff0000;
}
<div class="verticalLine">
  some other content
</div>

次佳解决方案

您可以使用水平规则标签创建垂直线。 <hr width="1" size="500"> 通过使用最小宽度和大尺寸，水平规则变为垂直尺寸。

第三种解决方案

您可以使用一个空的<div>，其样式与您想要显示的行完全相同：

HTML：

<div class="vertical-line" />

具有精确高度 (覆盖风格 in-line)：



  div.vertical-line{
      width: 1px; /* Line width */
      background-color: black; /* Line color */
      height: 100%; /* Override in-line if you want specific height. */
      float: left; /* Causes the line to float to left of content. 
        You can instead use position:absolute or display:inline-block
        if this fits better with your design */
    }
<div class="vertical-line" style="height: 45px;" />

如果您想要 3D 外观风格边框：



    div.vertical-line{
      width: 0px; /* Use only border style */
      height: 100%;
      float: left; 
      border: 1px inset; /* This is default border style for <hr> tag */
    }
   <div class="vertical-line" style="height: 45px;" />

您当然也可以使用高级组合进行实验：



  div.vertical-line{
      width: 1px;
      background-color: silver;
      height: 100%;
      float: left;
      border: 2px ridge silver ;
      border-radius: 2px;
    }
 <div class="vertical-line" style="height: 45px;" />

第四种方案

您还可以使用 HTML 水平线<hr /> 进行垂直线

<hr class="vertical"/>

CSS：

hr.vertical
{
   width: 0px;
   height: 100%; /* or height in PX */
}

Working Example

第五种方案

<hr> 元素没有垂直的等价物。但是，您可能想要尝试的一种方法是使用任何分离的左侧或右侧的简单边框：

CSS 文件

<style type="text/css">
    #your_col {
      border-left: 1px solid black;
    }
</style>

HTML 文件

<div id="your_col">
    Your content here
</div>

第六种方案

HTML5 custom elements(或纯 CSS)

javascript

注册你的元素

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

* -在所有自定义元素中都是强制性的。

css

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

*您可能需要使用 display:inline-block|inline 进行调整，因为 inline 不会扩展到包含元素的高度。使用边距将线放在容器内。

实例化

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

*不幸的是，您无法创建自定义 self-closing 标签。

usage

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

*见上述注释。

第七种方案

另一个选项是使用 1 像素图像，并设置高度 – 此选项将允许您将其浮动到您需要的位置。

不是最优雅的解决方案。

第八种方案

没有任何标签在 HTML 中创建垂直线。

  1. 方法：加载线图像。然后设置它的样式像"height: 100px ; width: 2px"

  2. 方法：您可以使用<td> 标签<td style="border-left: 1px solid red; padding: 5px;"> X </td>

第九种方案

为什么不使用&＃124，这是|的 HTML 特殊字符

第十种方案

我使用”hr” 代码的组合建议，这里是我的代码看起来像：

<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>

我只是改变了”left” 像素值的位置。 (我使用垂直线到我的网页上的 line-up 内容，然后我删除它。)

感谢所有发布他们的解决方案！

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。