为什么不使用&#124，这是|的html特殊字符

你也可以使用HTML符号|呈现为'|'

垂直到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>

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

*见上面的注释。

没有与<hr>元素等值的垂直元素。然而，你可能想尝试的一种方法是在你要分离的东西的左边或右边使用一个简单的边界:

# your_col { Border-left: 1px纯黑色; ｝ < div id = " your_col " > 你的内容在这里 < / div >

在你想要应用竖行的Previous元素中，你可以设置CSS…

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