如何在HTML中创建一条垂直线

Question

如何使用HTML制作垂直线？

Answer 1

将<div>标记放在您希望下一行显示的位置，并使用CSS对其进行样式化：

.verticalLine {

  border-left: thick solid #ff0000;

}

<div class="verticalLine">

  some other content

</div>

Answer 2

您可以使用水平规则标记创建垂直线。

<hr width="1" size="500">

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

Answer 3

您可以使用<div>与您希望显示的行完全相同的样式的空：

HTML：

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

精确的高度（在线覆盖样式）：

  div.vertical-line{

      width: 1px; /* Line width */

      background-color: black; /* Line color */

      height: 100%; /* Override in-line if you want specific height. */

      float: left; /* Causes the line to float to left of content. 

        You can instead use position:absolute or display:inline-block

        if this fits better with your design */

    }

<div class="vertical-line" style="height: 45px;"></div>

如果想要3D外观，请设置边框样式：

    div.vertical-line{

      width: 0px; /* Use only border style */

      height: 100%;

      float: left; 

      border: 1px inset; /* This is default border style for <hr> tag */

    }

   <div class="vertical-line" style="height: 45px;"></div>

您当然也可以尝试使用高级组合：

  div.vertical-line{

      width: 1px;

      background-color: silver;

      height: 100%;

      float: left;

      border: 2px ridge silver ;

      border-radius: 2px;

    }

 <div class="vertical-line" style="height: 45px;"></div>