如何使用 HTML 制作垂直线

在 HTML 中制作垂直线有多种方法，下面将会介绍两种常用的方法。

方法一：使用 CSS 边框

使用 CSS 中的边框属性可以轻松地制作垂直线。以下是实现的步骤：

1. 在 HTML 中创建一个元素（可以是 <div> 或 <span> 等）来表示垂直线。
2. 使用 CSS 样式设置元素的宽度、高度和边框属性。
3. 将边框的左右边框设置为透明，以便只显示垂直边框。

示例代码如下所示：

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

.vertical-line {
  border-left: 1px solid black;
  height: 200px;
}

这段代码创建了一个高度为200像素、宽度为1像素的垂直线。

方法二：使用 <hr> 元素

HTML 中的 <hr> 元素用于创建水平线，但可以借助 CSS 样式将其样式修改为垂直线。以下是实现的步骤：

1. 在 HTML 中使用 <hr> 元素创建一个水平线。
2. 使用 CSS 样式设置元素的高度、边框和背景颜色。
3. 将宽度设置为 0，以便只显示垂直线。

示例代码如下所示：

<hr class="vertical-line">

.vertical-line {
  height: 200px;
  border: none;
  border-left: 1px solid black;
  background-color: black;
  width: 0;
}

这段代码创建了一个高度为200像素、宽度为1像素的垂直线，并设置了黑色背景颜色。

以上两种方法都可以实现制作垂直线的效果，你可以根据自己的需求选择其中一种方法来使用。