你可以使用一个空的<div>，它的样式就像你想要的行一样:

HTML:

<div class="vertical-line"></div>

精确的高度(覆盖样式):

div.vertical-line { 宽度:1 px;/*线宽*/ 背景颜色:黑色;/*线条颜色*/ 高度:100%;/*如果你想要特定的高度。* / 浮:左;/*使行浮动到内容的左边。 您可以使用position:absolute或display:inline-block代替 如果这更适合你的设计*/ ｝ < span style=" font - family:宋体;"> < / div >

样式的边界，如果你想要3D外观:

div.vertical-line { 宽度:0 px;/*只使用边框样式*/ 高度:100%; 浮:左; 边框:1px插入;这是<hr>标签*/的默认边框样式 ｝ < span style=" font - family:宋体;"> < / div >

当然，你也可以尝试高级组合:

div.vertical-line { 宽度:1 px; 背景颜色:银色; 高度:100%; 浮:左; 边框:2px脊银; border - radius: 2 px; ｝ < span style=" font - family:宋体;"> < / 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 width="1" size="500" style="0 auto" />

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

要添加一条垂直线，你需要样式一个hr。

现在，当你画一条垂直线时，它会出现在页面的中间:

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

现在把它放在你想要的地方，你可以使用下面的代码:

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

这将把它定位到左边，你可以把它反向定位到右边。

在HTML中没有任何创建垂直线的标记。

方法:加载直线图像。然后你设置它的样式像"height: 100px;宽:2 px” 方法:你可以使用<td>标签<td style="border-left: 1px solid red;填充:5 px;"> X </td> .

您可以通过简单地使用任何html元素的height / width来绘制一条垂直线。

# verticle-line { 宽度:1 px; 最小高度:400 px; 背景:红色; ｝ < div id = " verticle-line " > < / div >