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;*/
}

*见上面的注释。

我认为这是一种简单的方法，你可以根据你的需要左右改变边界

.vertical-line { 左边框:1px实线#000 ｝ < span class = "垂直线" > < /跨度

您还可以使用HTML水平线<hr />创建一条垂直线

Html, body{height: 100%;} 人力资源。垂直{ 宽度:0 px; 高度:100%; /*或PX */中的高度 ｝ <hr class="vertical" />

你也可以使用HTML符号&#124;呈现为'|'

还有一种可能的方法:使用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或更老的版本)不支持它。

您可以使用水平规则标记来创建垂直线。

<hr width="1" size="500" style="0 auto" />

通过使用最小的宽度和大的尺寸，水平规则变成了垂直规则。