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

# verticle-line { 宽度:1 px; 最小高度:400 px; 背景:红色; ｝ < div id = " verticle-line " > < / div >

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

position: absolute; 
left: 50%;

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

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

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

.verticalLine { Border-left:厚实实心#ff0000; ｝ < div class = "垂线”> 其他内容 < / div >

还有一种可能的方法:使用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或更老的版本)不支持它。

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

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

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

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

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

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