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

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

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

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

通过使用最小的宽度和大的尺寸，水平规则变成了垂直规则。

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

.vertical-line { 左边框:1px实线#000 ｝ < span class = "垂直线" > < /跨度

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

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

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

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

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

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

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

浏览器支持:> *:first-child和:not()

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

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

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

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

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