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


当前回答

旋转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 >

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

position: absolute; 
left: 50%;

只需使用UTF-8杂项符号之一

The & # 124;

& # x7C;

这就是你所需要的,并且它与所有浏览器兼容。

回头谢谢我。

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

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

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

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

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

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

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

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