問題描述

如何使用 HTML 進行垂直線？

最佳解決方案

將<div> 放在您希望線條顯示到下一個標記的地方，並使用 CSS 對其進行風格化：



.verticalLine {
  border-left: thick solid #ff0000;
}
<div class="verticalLine">
  some other content
</div>

次佳解決方案

您可以使用水平規則標籤創建垂直線。 <hr width="1" size="500"> 通過使用最小寬度和大尺寸，水平規則變為垂直尺寸。

第三種解決方案

您可以使用一個空的<div>，其樣式與您想要顯示的行完全相同：

HTML：

<div class="vertical-line" />

具有精確高度 (覆蓋風格 in-line)：



  div.vertical-line{
      width: 1px; /* Line width */
      background-color: black; /* Line color */
      height: 100%; /* Override in-line if you want specific height. */
      float: left; /* Causes the line to float to left of content. 
        You can instead use position:absolute or display:inline-block
        if this fits better with your design */
    }
<div class="vertical-line" style="height: 45px;" />

如果您想要 3D 外觀風格邊框：



    div.vertical-line{
      width: 0px; /* Use only border style */
      height: 100%;
      float: left; 
      border: 1px inset; /* This is default border style for <hr> tag */
    }
   <div class="vertical-line" style="height: 45px;" />

您當然也可以使用高級組合進行實驗：



  div.vertical-line{
      width: 1px;
      background-color: silver;
      height: 100%;
      float: left;
      border: 2px ridge silver ;
      border-radius: 2px;
    }
 <div class="vertical-line" style="height: 45px;" />

第四種方案

您還可以使用 HTML 水平線<hr /> 進行垂直線

<hr class="vertical"/>

CSS：

hr.vertical
{
   width: 0px;
   height: 100%; /* or height in PX */
}

Working Example

第五種方案

<hr> 元素沒有垂直的等價物。但是，您可能想要嘗試的一種方法是使用任何分離的左側或右側的簡單邊框：

CSS 文件

<style type="text/css">
    #your_col {
      border-left: 1px solid black;
    }
</style>

HTML 文件

<div id="your_col">
    Your content here
</div>

第六種方案

HTML5 custom elements(或純 CSS)

javascript

註冊你的元素

var vr = document.registerElement('v-r'); // vertical rule please, yes!

* -在所有自定義元素中都是強制性的。

css

v-r {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

*您可能需要使用 display:inline-block|inline 進行調整，因為 inline 不會擴展到包含元素的高度。使用邊距將線放在容器內。

實例化

js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>

*不幸的是，您無法創建自定義 self-closing 標籤。

usage

 <h1>THIS<v-r></v-r>WORKS</h1>

示例：http://html5.qry.me/vertical-rule

不想混淆 javascript？

只需將此 CSS 類應用於您指定的元素即可。

css

.vr {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

*見上述註釋。

第七種方案

另一個選項是使用 1 像素圖像，並設置高度 – 此選項將允許您將其浮動到您需要的位置。

不是最優雅的解決方案。

第八種方案

沒有任何標籤在 HTML 中創建垂直線。

  1. 方法：加載線圖像。然後設置它的樣式像"height: 100px ; width: 2px"

  2. 方法：您可以使用<td> 標籤<td style="border-left: 1px solid red; padding: 5px;"> X </td>

第九種方案

為什麼不使用&＃124，這是|的 HTML 特殊字符

第十種方案

我使用”hr” 代碼的組合建議，這裏是我的代碼看起來像：

<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>

我只是改變了”left” 像素值的位置。 (我使用垂直線到我的網頁上的 line-up 內容，然後我刪除它。)

感謝所有發佈他們的解決方案！

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。