如何使用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"></div>

具有精确的高度（行内覆盖样式）：

  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;"></div>

如果想要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>

您当然也可以尝试高级组合：

  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;"></div>

您也可以使用HTML水平线制作垂直线 <hr />

html, body{height: 100%;}

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

<hr class="vertical" />

没有与该<hr>元素垂直的等效项。但是，您可能要尝试的一种方法是在要分隔的内容的左侧或右侧使用简单的边框：

#your_col {
  border-left: 1px solid black;
}

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

HTML5 自定义元素（或纯CSS）

1. JavaScript

注册您的元素。

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

* -在所有自定义元素中都是必填项。

2. CSS

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

*您可能需要摆弄一些东西，display:inline-block|inline因为它inline不会扩展到包含元素的高度。使用边距使线在容器内居中。

3.实例化

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

*很遗憾，您无法创建自定义自动关闭标签。

用法

 <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元素中简单地使用height / width来绘制一条垂直线。

#verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
}

<div id="verticle-line"></div>

没有任何标签可以在HTML中创建垂直线。

1. 方法：您加载线条图像。然后您将其样式设置为"height: 100px ; width: 2px"

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

您可以使用hr（水平线）标签，然后使用以下CSS将其旋转90度

hr {   
    transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

http://jsfiddle.net/haykaghabekyan/0c969bm6/1/

我使用了建议的“ hr”代码的组合，这是我的代码：

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

我只是简单地更改了“左”像素值的值来定位它。（我使用垂直线来排列网页上的内容，然后将其删除。）

要创建以div为中心的垂直线，我认为您可以使用此代码。我想，“容器”的宽度很可能是100％。

div.container {
  width: 400px;
}

div.vertical-line {
  border-left: 1px solid #808080;
  height: 350px;
  margin-left: auto;
  margin-right: auto;
  width: 1px;
}

<div class="container">
  <div class="vertical-line">&nbsp;</div>
</div>

为什么不使用＆＃124，它是|的html特殊字符。

如果您的目标是在容器中放置垂直线以分隔并排的子元素（列元素），则可以考虑如下设计容器的样式：

.container > *:not(:first-child) {
  border-left: solid gray 2px;
}

这将从第二个子元素开始为所有子元素添加左边框。换句话说，您在相邻子级之间获得了垂直边界。

• >是一个子选择器。它匹配左侧指定元素的任何子元素。
• *是通用选择器。它匹配任何类型的元素。
• :not(:first-child) 表示它不是其父母的第一个孩子。

浏览器支持：> *：first-child和：not（）

我认为这比简单的.child-except-first {border-left: ...}规则要好，因为让竖线来自容器的规则而不是来自不同子元素的规则更有意义。

这是否比使用临时的垂直规则元素更好（通过设置水平规则等）取决于您的用例，但这至少是一种选择。

一种可能的方法是：使用SVG。

例如：

<svg height="210" width="500">
    <line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
      Sorry, your browser does not support inline SVG.
</svg>

优点：

• 您可以具有任意长度和方向的线。
• 您可以轻松指定宽度，颜色

缺点：

• 大多数现代浏览器现在都支持SVG。但是某些旧的浏览器（例如IE 8和更早版本）不支持它。

垂直于div的垂直线

    <div style="width:50%">
        <div style="border-right:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>
  

离开div的垂直线

    <div style="width:50%">
        <div style="border-left:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>
  

要添加垂直线，您需要设置hr的样式。

现在，当您制作一条垂直线时，它将显示在页面中间：

<hr style="width:0.5px;height:500px;"/>

现在将其放在您想要的位置，您可以使用以下代码：

<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>

这会将其定位在左侧，您可以将其反转以将其定位在右侧。

<hr>水平线有一个标签。它可以与CSS一起使用来制作水平线：

.divider{
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    width: 1px;
    background-color: red;
}

<hr class="divider">

width属性确定线的粗细。height属性确定线的长度。background-color属性确定线条的颜色。

在要应用垂直行的上一个元素中，可以设置CSS ...

border-right-width: thin;
border-right-color: black;
border-right-style: solid;

旋转<hr>90度：

<hr style="width:100px; transform:rotate(90deg);">

对于内联样式，我使用以下代码：

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />

并将其直接定位在中心。

我需要一个内联垂直线，所以我欺骗了一个按钮以使其成为一条线。

<button type="button" class="v_line">l</button>

.v_line {
         width: 0px;
         padding: .5em .5px;
         background-color: black;
         margin: 0px; 4px;
        }

<div style="width:1px;background-color:#C0C0C0;"></div>

这对我来说很棒

使垂直线居中居中：

position: absolute; 
left: 50%;