在 HTML 中建立垂直線

若要在 HTML 頁面上建立垂直線，可用 CSS 設定線條的高度、粗細與顏色。裝飾性分隔線適合使用 border-left；若要表達主題轉換，則可設定 <hr> 的樣式；若要在內容區塊之間安排分隔線，可使用彈性盒版面配置或 CSS Grid。單靠 HTML 無法控制線條外觀。

使用 CSS border-left 建立垂直線

左側邊框是簡單的裝飾線。為元素設定明確的高度，再設定邊框寬度與顏色。這段 Node.js 指令碼會將完整範例頁面寫入 vertical-line.html；在瀏覽器中開啟該檔案即可檢視。

以下是完整的頁面產生器。使用 Node.js 執行後，它會建立一個頁面，在兩個標籤之間顯示藍色分隔線。

const { writeFileSync } = require("node:fs");

const page = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vertical line with a border</title>
  <style>
    .row { display: flex; align-items: center; }
    .line {
      height: 8rem;
      border-left: 2px solid #2563eb;
      margin-inline: 1rem;
    }
  </style>
</head>
<body>
  <div class="row">
    <span>Account details</span>
    <div class="line" aria-hidden="true"></div>
    <span>Preferences</span>
  </div>
</body>
</html>`;

writeFileSync("vertical-line.html", page);
console.log("Created vertical-line.html");

CSS 將線條長度設為 8 rem、粗細設為 2 像素；可調整這些數值和邊框顏色，以配合頁面設計。margin-inline 會在由左至右和由右至左的版面配置中，於兩側加入間距。這條線僅供裝飾，因此使用 aria-hidden="true" 可讓它不出現在無障礙樹中。百分比高度取決於具有明確高度的包含區塊；否則，解析出的尺寸可能與預期不同。

將 hr 元素改作垂直線

hr 元素在 HTML 原始碼中寫作 <hr>，用來表示頁面不同部分之間的主題轉換。只有在內容確實需要表達這層含義時才使用它；CSS 會改變外觀，不會改變語意。瀏覽器會套用預設樣式，因此繪製窄垂直線之前，應先重設邊框。例如，使用 <hr class="vertical-rule">，並套用 width: 0; height: 8rem; border: 0; border-left: 2px solid #2563eb; margin: 1rem;。可見寬度由左側邊框決定。這個元素會留在一般文件流中並獨占一行；若要讓它位於並排內容之間，請將它放在 Flexbox 或 Grid 容器中。

使用彈性盒版面配置或 Grid 在內容之間放置分隔線

彈性盒版面配置和 Grid 會將分隔線安排為版面配置項目，而可見線條則由邊框或背景繪製。在 Flexbox 橫列中，將兩個內容區塊放在分隔線元素兩側；把父元素設為 display: flex; align-items: stretch; gap: 1rem;，每個區塊設為 flex: 1;，並為分隔線設定 border-left: 2px solid #2563eb;。線條會延伸至橫列高度，而橫列高度由內容較高的區塊決定。裝飾性分隔線請標記為 aria-hidden="true"。

使用 Grid 時可建立三欄，讓中間欄軌作為線條：grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); gap: 1rem;。將面板放在第一欄和第三欄，中間欄放置背景設為 background: #2563eb 的分隔線元素；2 像素的欄軌會決定線條粗細。在窄螢幕上，可透過媒體查詢將面板改為上下堆疊，並在符合閱讀順序時將垂直線替換為水平邊框。簡單的裝飾線可選用 border-left；需要表達主題轉換時可選用 <hr>；若分隔線應置於版面項目之間，則可使用彈性盒版面配置或 CSS Grid。