在 HTML 中如何添加垂直线-之路教程

←在HTML中如何添加鼠标悬停文本

HTML 标题列中的小图标如何添加？→

在 HTML 中如何添加垂直线

使用 HTML 和 CSS 的解决方案

在此代码中，我们可以了解如何在 HTML 中添加垂直线。

但是我们也需要使用 CSS。

分别使用 border-left 或者 border-right 属性在左侧或者右侧添加一条垂直线。

另请参阅如何将垂直线居中以及如何在文本前添加垂直线。

在左侧添加垂直线的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .verticalLine {
        border-left: 4px solid #4b42f5;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Example of a vertical ine</h2>
    <div class="verticalLine"></div>
  </body>
</html>

在右侧添加垂直线的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .verticalLine {
        border-right: 4px solid #4b42f5;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Example of a vertical line</h2>
    <div class="verticalLine"></div>
  </body>
</html>

要将垂直线居中，请将位置属性设置为“绝对”。

使垂直线居中的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .verticalLine {
        border-left: 4px solid #4b42f5;
        height: 200px;
        position: absolute;
        left: 50%;
        margin-left: -3px;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div class="verticalLine"></div>
  </body>
</html>

在我们的最后一个示例中，我们在文本前添加了一条垂直线。

在文本前添加垂直线的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .verticalLine {
        border-left: thick solid #4b42f5;
      }
    </style>
  </head>
  <body>
    <div class="verticalLine">
      Hello World
    </div>
  </body>
</html>

日期：2020-06-02 22:15:04 来源：oir作者：oir