在 HTML 中建立垂直線

Subodh Poudel 2023年2月19日
  1. 在 HTML 中使用 border-left CSS 屬性建立一條垂直線
  2. 在 HTML 中調整 hr 標籤以建立一條垂直線
在 HTML 中建立垂直線

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

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

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

border-left 屬性用於設定左側邊框的樣式。該屬性是 border-left widthborder-left styleborder-left color 的簡寫。

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

例如,在 HTML 中建立一個類為 v-linediv,然後選擇 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。最後,將線條的 colorbackground-color 設定為 #000

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

示例程式碼:

<hr>
hr{
 height:100vh;
 width:.5vw;
 border-width:0;
 color:#000;
 background-color:#000;
}
作者: Subodh Poudel
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

相關文章 - HTML Line