如何使用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>

其他回答

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

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

你也可以使用HTML符号&#124;呈现为'|'

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

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

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

水平线有一个<hr>标签。它还可以与CSS一起使用来制作水平线:

.divider { margin-left: 5 px; margin-right: 5 px; 身高:100 px; 宽度:1 px; 背景颜色:红色; } <人力资源类= >“分隔”

width属性决定了线条的粗细。height属性决定了线条的长度。background-color属性决定了线条的颜色。