迹忆客 专注技术分享

本文将介绍几种在 HTML 中创建垂直线的方法。

在 HTML 中使用 border-left CSS 属性创建一条垂直线

在 HTML 中，我们使用 hr 标签来创建一条水平线，但没有标签来创建一条垂直线。但是，我们可以使用 border-left CSS 属性模拟一条垂直线。

border-left 属性用于设置左侧边框的样式。该属性是 border-left width、border-left style 和 border-left color 的简写。

仅使用 border-left 属性将创建一条垂直线。我们可以在 HTML 中创建一个容器，选择它并应用该属性来实现垂直线。

例如，在 HTML 中创建一个类为 v-line 的 div，然后选择 v-line 并为其应用一些样式。将 border-left 属性设置为 thick solid #000。

接下来，将 height 设置为 100%，将 left 设置为 50%。最后，将 position 属性设置为 absolute。

在这里，我们将在网页中间有一个黑色边框。通过这种方式，我们可以使用 HTML 中的 border-left CSS 属性创建一条垂直线。

示例代码：

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

.v-line{
 border-left: thick solid #000;
 height:100%;
 left: 50%;
 position: absolute;
}

在 HTML 中调整 hr 标签以创建一条垂直线

我们可以调整 hr 标签并在 HTML 中创建一条垂直线。

hr 标签用于创建一条水平线。我们可以使用 height 标签的最大值和 hr 标签的 width 最小值。

这样，水平线的高度就会拉长，宽度就会缩小。我们可以为水平线及其边框应用相同的颜色，使其看起来垂直。

例如，在 HTML 中创建一个 hr 标签。在 CSS 中，将 hr 标签的 height 设置为 100vh，将 width 设置为 .5vw。

接下来，将 border-width 设置为 0。最后，将线条的 color 和 background-color 设置为 #000。

在这里，我们将 0 值设置为 border-width，这样垂直线就会变细。通过这种方式，我们使用 HTML 中的 hr 标签创建了一条垂直线。

示例代码：

<hr>

hr{
 height:100vh;
 width:.5vw;
 border-width:0;
 color:#000;
 background-color:#000;
}