如何用 CSS 建立垂直線？

使用 CSS 建立垂直線是一個簡單的過程，可以使用多種方法實現。在本文中，我們將學習和理解三種不同的使用 CSS 建立垂直線的方法。

本文中我們將使用邊框和一些塊級元素，我們的任務是用 CSS 建立一條垂直線。

建立垂直線的方法

以下是本文將討論的用 CSS 建立垂直線的方法，包括分步說明和完整的示例程式碼。

使用 border-left 屬性建立垂直線

要使用 CSS 建立垂直線，我們將使用 border-left 屬性，該屬性會在元素周圍建立一個左邊界。我們將調整其高度來建立一條線。

  • 我們使用了 wrap 類來使用 display 屬性建立一個 flex 容器，並使用 CSS justify-content 和 align-items 屬性將垂直線居中。
  • 然後，我們使用 vLine 類使用 border-left 屬性建立垂直線並設定其高度。

示例

這是一個完整的示例程式碼，實現了上述步驟，使用 CSS border-left 屬性建立垂直線。

<!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>

使用 rotate 函式建立垂直線

在這種使用 CSS 建立垂直線的方法中，我們將對 HTML hr 標籤（用於建立水平線）使用 transform 屬性的 rotate 函式。

  • 我們使用 div 作為元素選擇器，使用與方法一類似的 flex 屬性將垂直線居中。
  • 我們使用了 "transform: rotate(90deg);" 將水平線旋轉 90 度使其成為垂直線，並使用 CSS width 屬性定義其長度。

示例

這是一個完整的示例程式碼，實現了上述步驟，使用 CSS rotate() 函式建立垂直線。

<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;" 將垂直線居中。

示例

這是一個完整的示例程式碼，實現了上述步驟，使用 塊級元素建立垂直線。

<!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+ 閱讀量

啟動你的 職業生涯

完成課程獲得認證

開始學習
廣告