在 HTML 中创建垂直线

要在 HTML 页面上创建垂直线，可使用 CSS 设置其高度、粗细和颜色。装饰性分隔线适合用 border-left；如果分隔线表达内容上的主题转换，可设置 <hr> 的样式；若要在内容块之间放置分隔线，则可使用弹性盒布局或 CSS 网格。仅靠 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; 样式。可见宽度由左边框决定。该元素会留在文档的正常流中并独占一行；如果要让它位于并排内容之间，可将它放在弹性盒布局或网格容器中。

使用弹性盒布局或 CSS 网格在内容之间放置分隔线

弹性盒布局和网格会将分隔线定位为布局项，而可见线条则由边框或背景绘制。在弹性盒布局的行中，将两个内容区块放在分隔线元素两侧；把父元素设为 display: flex; align-items: stretch; gap: 1rem;，为每个区块设置 flex: 1;，并为分隔线设置 border-left: 2px solid #2563eb;。线条会延伸至整行高度，而行高由较高的内容区块决定。装饰性分隔线应标记为 aria-hidden="true"。

使用网格时，可设置三列，让中间轨道作为线条：grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); gap: 1rem;。将两个面板放在第一列和第三列，并在中间放置一个背景为 background: #2563eb 的分隔线元素；宽 2 像素的轨道决定线条粗细。在窄屏幕上，可通过媒体查询将面板改为纵向排列；如果更符合阅读顺序，也可将竖线替换为水平边框。简单的装饰线可选用 border-left；有实际主题转换含义时可选用 <hr>；若分隔线需要位于布局项之间，则可使用弹性盒布局或 CSS 网格。