另一种选择是使用1像素的图像，并设置高度-这个选项将允许您将其浮动到您需要的位置。

但这不是最优雅的解决方案。

你可以使用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/

要使垂直线在中间居中使用:

position: absolute; 
left: 50%;

你可以使用一个空的<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 >

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

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

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

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

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

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

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

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