没有与<hr>元素等值的垂直元素。然而，你可能想尝试的一种方法是在你要分离的东西的左边或右边使用一个简单的边界:

#your_col {
border-left: 1px solid black;
}

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

在标记周围放置<div>，然后使用CSS来设置它的样式:

.verticalLine {
border-left: thick solid #ff0000;
}

<div class="verticalLine">
some other content
</div>

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

1. 方法:加载直线图像。然后将其样式设置为"height: 100px ; width: 2px"

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

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

但这不是最优雅的解决方案。

你可以使用一个空的<div>，它的样式完全符合你想要的行:

HTML:

<div class="vertical-line"></div>

精确的高度(覆盖样式):

  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;"></div>

Style the border if you want 3D look:

    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>

You can of course also experiment with advanced combinations:

  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;"></div>

您可以使用水平规则标记来创建垂直线。

<hr width="1" size="500" style="0 auto" />

By using minimal width and large size, horizontal rule becomes a vertical one.

要使垂直线在中间居中使用:

position: absolute;
left: 50%;

为什么不使用|，这是|的html特殊字符

你也可以使用HTML水平线<hr />创建一条垂直线

html, body{height: 100%;}


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

<hr class="vertical" />

要添加一条垂直线，你需要样式一个hr。

现在，当你画一条垂直线时，它会出现在页面的中间:

<hr style="width:0.5px;height:500px;"/>

现在把它放在你想要的地方，你可以使用下面的代码:

<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>

这将把它定位到左边，你可以把它反向定位到右边。

我使用了建议的“hr”代码的组合，下面是我的代码:

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

我只是改变了“左”像素值的值来定位它。(我用竖线来排列网页上的内容，然后我删除了它。)

你可以使用hr(水平线)标签，然后用下面的css旋转90度

hr {
transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}

http://jsfiddle.net/haykaghabekyan/0c969bm6/1/

HTML5 自定义元素(或纯CSS)

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>

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

*见上面的注释。

如果你的目标是在容器中放置垂直线来分离并排的子元素(列元素)，你可以考虑这样样式化容器:

.container > *:not(:first-child) {
border-left: solid gray 2px;
}

这将为从第2个子元素开始的所有子元素添加左边框。换句话说，相邻子节点之间有垂直边界。

• >是子选择器。它匹配左边指定的元素的任何子元素。
• *是一个通用选择器。它匹配任何类型的元素。
• :not(:first-child)表示它不是其父对象的第一个子对象。

浏览器支持:> *:第一个孩子和:不()

我认为这比简单的.child-except-first {border-left: ...}规则更好，因为让垂直线来自容器的规则，而不是不同的子元素的规则更有意义。

这是否比使用临时的垂直规则元素(通过样式化水平规则等)更好，将取决于您的用例，但这至少是一种替代方案。

还有一种可能的方法:使用SVG。

例如:

<svg height="210" width="500">
<line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
Sorry, your browser does not support inline SVG.
</svg>

优点:

• 你可以有任意长度和方向的直线。
• 您可以轻松地指定宽度，颜色

缺点:

• 现在大多数现代浏览器都支持SVG。但是一些旧的浏览器(如IE 8或更老的版本)不支持它。

在你想要应用竖行的Previous元素中，你可以设置CSS…

border-right-width: thin;
border-right-color: black;
border-right-style: solid;

您可以通过简单地使用任何html元素的height / width来绘制一条垂直线。

#verticle-line {
width: 1px;
min-height: 400px;
background: red;
}

<div id="verticle-line"></div>

对于内联样式，我使用了以下代码:

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />

这样就把它直接放在了中心。

垂直到div

    <div style="width:50%">
<div style="border-right:1px solid;">
<ul>
<li>
Empty div didn't shows line
</li>
<li>
Vertical line length depends on the content in the div
</li>
<li>
Here I am using inline style. You can replace it by external style or internal style.
</li>
</ul>
</div>
</div>

到div左边的垂直线

    <div style="width:50%">
<div style="border-left:1px solid;">
<ul>
<li>
Empty div didn't shows line
</li>
<li>
Vertical line length depends on the content in the div
</li>
<li>
Here I am using inline style. You can replace it by external style or internal style.
</li>
</ul>
</div>
</div>

将<hr>旋转90度:

<hr style="width:100px; transform:rotate(90deg);">

我需要一条内联的垂直线，所以我把一个按钮变成了一条直线。

<button type="button" class="v_line">l</button>


.v_line {
width: 0px;
padding: .5em .5px;
background-color: black;
margin: 0px; 4px;
}

水平线有一个<hr>标记。它还可以与CSS一起使用来制作水平线:

.divider{
margin-left: 5px;
margin-right: 5px;
height: 100px;
width: 1px;
background-color: red;
}

<hr class="divider">

The width property determines the thickness of the line. The height property determines the length of the line. The background-color property determines the color of the line.

我认为这是一种简单的方法，你可以根据你的需要左右改变边界

.vertical-line{
border-left:1px solid #000


}

<span class="vertical-line"></span

你也可以使用HTML符号 |，它呈现为'|'

只需使用UTF-8杂项符号之一

|

|

这就是你所需要的，并且它与所有浏览器兼容。

回头谢谢我。