在 HTML 中建立垂直線

1. 在 HTML 中使用 border-left CSS 屬性建立一條垂直線
2. 在 HTML 中調整 hr 標籤以建立一條垂直線

本文將介紹幾種在 HTML 中建立垂直線的方法。

在 HTML 中使用 border-left CSS 屬性建立一條垂直線

在 HTML 中，我們使用 hr 標籤來建立一條水平線，但沒有標籤來建立一條垂直線。但是，我們可以使用 border-left CSS 屬性模擬一條垂直線。

border-left 屬性用於設定左側邊框的樣式。該屬性是 border-left width、border-left style 和 border-left color 的簡寫。

僅使用 border-left 屬性將建立一條垂直線。我們可以在 HTML 中建立一個容器，選擇它並應用該屬性來實現垂直線。

例如，在 HTML 中建立一個類為 v-line 的 div，然後選擇 v-line 併為其應用一些樣式。將 border-left 屬性設定為 thick solid #000。

接下來，將 height 設定為 100%，將 left 設定為 50%。最後，將 position 屬性設定為 absolute。

在這裡，我們將在網頁中間有一個黑色邊框。通過這種方式，我們可以使用 HTML 中的 border-left CSS 屬性建立一條垂直線。

示例程式碼：

<div class="v-line">
</div>

.v-line{
 border-left: thick solid #000;
 height:100%;
 left: 50%;
 position: absolute;
}

在 HTML 中調整 hr 標籤以建立一條垂直線

我們可以調整 hr 標籤並在 HTML 中建立一條垂直線。

hr 標籤用於建立一條水平線。我們可以使用 height 標籤的最大值和 hr 標籤的 width 最小值。

這樣，水平線的高度就會拉長，寬度就會縮小。我們可以為水平線及其邊框應用相同的顏色，使其看起來垂直。

例如，在 HTML 中建立一個 hr 標籤。在 CSS 中，將 hr 標籤的 height 設定為 100vh，將 width 設定為 .5vw。

接下來，將 border-width 設定為 0。最後，將線條的 color 和 background-color 設定為 #000。

在這裡，我們將 0 值設定為 border-width，這樣垂直線就會變細。通過這種方式，我們使用 HTML 中的 hr 標籤建立了一條垂直線。

示例程式碼：

<hr>

hr{
 height:100vh;
 width:.5vw;
 border-width:0;
 color:#000;
 background-color:#000;
}