如何在我的垂直超鏈接下方畫一條垂直線？ html css

Question

我試圖將我的垂直對齊的超鏈接放在垂直線的頂部。 為了證明它以正確的方式工作，讓我們使用字母“i”。 點代表我的超鏈接，而下面的筆划代表我要編碼的垂直線。

經過研究，編碼了這個樣式：

 .vl { border-left: 4px solid #25374C; height: 300px; }

 <div class="v1"> </div>

好吧，這些在我的網頁上沒有顯示任何內容。 我試過使用

標記，也不起作用。

Answer 1

只需創建一個column flex-box並將項目對齊到center 。

 .line { height: 20px; width: 4px; background: red; }.flex-wrapper { display: flex; flex-direction: column; align-items: center; width: max-content; }

 <div class="flex-wrapper"> <a href="">hyperlink</a> <div class="line" /> </div>

Answer 2

使用以下 css：

.v1 {
  border-left: 4px solid #25374C;
  height: 300px;
}

Answer 3

該線程中已經發布了一些答案和評論，它們將幫助您使用<div>創建一條垂直線。 但與往常一樣，您還有更多選擇。

如果您覺得該行與鏈接密不可分，例如示例中的行來自i ，那么您可能會將其視為內容而不是樣式。 然后像這樣的簡單解決方案也是可能的：

 p{ writing-mode: vertical-lr; }/* or use vertical-rl */ a{ text-decoration: none; }

 <p><a href="#">link</a> ————</p>