如何用 CSS 创建垂直线？

使用 CSS 创建垂直线是一个简单的过程，可以使用多种方法实现。在本文中，我们将学习和理解三种不同的使用 CSS 创建垂直线的方法。

本文中我们将使用边框和一些块级元素，我们的任务是用 CSS 创建一条垂直线。

创建垂直线的方法

以下是本文将讨论的用 CSS 创建垂直线的方法，包括分步说明和完整的示例代码。

使用 border-left 属性创建垂直线

要使用 CSS 创建垂直线，我们将使用 border-left 属性，该属性会在元素周围创建一个左边界。我们将调整其高度来创建一条线。

  • 我们使用了 wrap 类来使用 display 属性创建一个 flex 容器，并使用 CSS justify-content 和 align-items 属性将垂直线居中。
  • 然后，我们使用 vLine 类使用 border-left 属性创建垂直线并设置其高度。

示例

这是一个完整的示例代码，实现了上述步骤，使用 CSS border-left 属性创建垂直线。

Open Compiler
<!DOCTYPE html>
<html>
<head>
    <style>
        .wrap {
            display: flex;
            justify-content: center;
            height: 100vh;
            align-items: center;
        }
        .vLine {
            border-left: 4px solid #800080;
            height: 300px;
        }
    </style>
</head>
<body>
    <h3>
        To Create a Vertical Line with CSS
    </h3>
    <p>
        In this example we have used <strong>border-
        left</strong> property to create a vertical
        line with CSS.
    </p>
    <div class="wrap">
        <div class="vLine"></div>
    </div>
</body>
</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

使用 rotate 函数创建垂直线

在这种使用 CSS 创建垂直线的方法中，我们将对 HTML hr 标签（用于创建水平线）使用 transform 属性的 rotate 函数。

  • 我们使用 div 作为元素选择器，使用与方法一类似的 flex 属性将垂直线居中。
  • 我们使用了 "transform: rotate(90deg);" 将水平线旋转 90 度使其成为垂直线，并使用 CSS width 属性定义其长度。

示例

这是一个完整的示例代码，实现了上述步骤，使用 CSS rotate() 函数创建垂直线。

Open Compiler
<html>
<head>
    <style>
        div {
            display: flex;
            justify-content: center;
            height: 100vh;
            align-items: center;
        }
        hr {
            width: 400px;
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <h3>
        To Create a Vertical Line with CSS
    </h3>
    <p>
        In this example we have used <strong>rotate
        </strong> function with hr tag to create a
        vertical line with CSS.
    </p>
    <div>
        <hr>
    </div>
</body>
</html>

使用块级元素创建垂直线

在这种方法中，我们将使用 HTML 块级元素以及 CSS height 和 width 属性来使用 CSS 创建垂直线。

  • 我们使用 vLine 类来创建和设计垂直线。
  • 我们使用 "width: 2px;" 减少宽度并使用 CSS height 属性增加长度，使其看起来像一条直线。
  • 创建线条后，我们使用 CSS background-color 来更改其颜色，并使用 "margin: 0 auto;" 将垂直线居中。

示例

这是一个完整的示例代码，实现了上述步骤，使用 块级元素创建垂直线。

Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .vLine {
            width: 2px;
            height: 300px;
            background-color: #800080;
            margin: 0 auto;
        }
    </style>
    <title>Vertical Line Example</title>
</head>
<body>
    <h3>
        To Create a Vertical Line with CSS
    </h3>
    <p>
        In this example we have used <strong>block
        </strong> element with <strong>height</strong> 
        and <strong>width</strong> properties to create 
        a vertical line with CSS.
    </p>
    <article class="vLine"></article>
</body>
</html>
注意：除了 <fieldset>、<ol>、<ul> 和 <tfoot> 之外，所有块级元素都可以像上述方法一样使用。

结论

使用 CSS 创建垂直线是一个简单的过程，可以使用 CSS 属性创建。在本文中，我们讨论了三种使用 CSS 创建垂直线的方法，分别是使用 CSS border-left 属性、rotate() 函数以及使用 HTML 块级元素。

更新于：2024年9月11日

2K+ 阅读量

启动你的 职业生涯

完成课程获得认证

开始学习
广告