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

要在div中创建一条居中的垂直线，我认为你可以使用这段代码。 “容器”可能是100%的宽度，我猜。

div.container { 宽度:400 px; ｝ div.vertical-line { Border-left: 1px solid #808080; 身高:350 px; margin-left:汽车; margin-right:汽车; 宽度:1 px; ｝ < div class = "容器" > < div class = "垂直线”>,< / div > < / div >

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

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

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

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

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

方法:加载直线图像。然后你设置它的样式像"height: 100px;宽:2 px” 方法:你可以使用<td>标签<td style="border-left: 1px solid red;填充:5 px;"> X </td> .

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