如何在HTML上制作垂直线

在HTML中制作垂直线通常是指垂直线的样式。这可以通过CSS样式表来实现。

使用CSS样式表制作垂直线

要使元素拥有垂直线，可以使用border-left或border-right属性来添加一个颜色和宽度合适的垂直线。例如：

.vert-line {
  border-right: 1px solid black;
}

HTML标记中的应用

将这个CSS样式应用于HTML标记上。例如，将垂直线添加到段落元素：

<p class="vert-line">这是一个段落</p>

这将使垂直线出现在元素右侧，分隔出段落和其他内容。

同理，向左添加垂直线使用border-left属性：

.vert-line {
  border-left: 1px solid black;
}

直接在HTML标记中制作垂直线

另一种方法是在HTML标记本身中制作垂直线，使用<hr>标记。 <hr>标记在HTML中表示水平分隔线，但是可以使用CSS使其成为垂直线。

使用样式类

创建样式表 .vertical-line：

.vertical-line {
  border-color: black;
  border-left: 1px solid;
  height: 100px;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 0;
}

• border-color 定义了垂直线的颜色。
• border-left 定义了垂直线的宽度。
• height 定义了垂直线的高度。
• margin 设置内边距。
• position 设置定位，必须为absolute。
• left 属性将把线条放在元素的中间。

在HTML中的应用

在HTML标记中使用这个样式类：

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

代码会生成一个垂直线状的元素。可以使用height属性改变垂直线的高度。