如何使用HTML制作一条垂直线?


当前回答

我使用了建议的“hr”代码的组合,下面是我的代码:

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

我只是改变了“左”像素值的值来定位它。(我用竖线来排列网页上的内容,然后我删除了它。)

其他回答

旋转a <hr> 90度:

<人力资源风格= "宽度:100 px;变换:旋转(90度);" >

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

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

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

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

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

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

position: absolute; 
left: 50%;