垂直到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>

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

position: absolute; 
left: 50%;

旋转a <hr> 90度:

<人力资源风格= "宽度:100 px;变换:旋转(90度);" >

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

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

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

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

.divider { margin-left: 5 px; margin-right: 5 px; 身高:100 px; 宽度:1 px; 背景颜色:红色; ｝ <人力资源类= >“分隔”

width属性决定了线条的粗细。height属性决定了线条的长度。background-color属性决定了线条的颜色。