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

Question

如何使用HTML制作垂直线？

Answer 1

将<div>标记放在您希望下一行显示的位置，并使用CSS对其进行样式化：.verticalLine {&nbsp; border-left: thick solid #ff0000;}<div class="verticalLine">&nbsp; some other content</div>

Answer 2

您可以使用水平规则标记创建垂直线。<hr width="1" size="500">通过使用最小宽度和大尺寸，水平规则变为垂直规则。

Answer 3

您可以使用<div>与您希望显示的行完全相同的样式的空：HTML：<div class="vertical-line"></div>精确的高度（在线覆盖样式）：&nbsp; div.vertical-line{&nbsp; &nbsp; &nbsp; width: 1px; /* Line width */&nbsp; &nbsp; &nbsp; background-color: black; /* Line color */&nbsp; &nbsp; &nbsp; height: 100%; /* Override in-line if you want specific height. */&nbsp; &nbsp; &nbsp; float: left; /* Causes the line to float to left of content.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; You can instead use position:absolute or display:inline-block&nbsp; &nbsp; &nbsp; &nbsp; if this fits better with your design */&nbsp; &nbsp; }<div class="vertical-line" style="height: 45px;"></div>如果想要3D外观，请设置边框样式：&nbsp; &nbsp; div.vertical-line{&nbsp; &nbsp; &nbsp; width: 0px; /* Use only border style */&nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; float: left;&nbsp;&nbsp; &nbsp; &nbsp; border: 1px inset; /* This is default border style for <hr> tag */&nbsp; &nbsp; }&nbsp; &nbsp;<div class="vertical-line" style="height: 45px;"></div>您当然也可以尝试使用高级组合：&nbsp; div.vertical-line{&nbsp; &nbsp; &nbsp; width: 1px;&nbsp; &nbsp; &nbsp; background-color: silver;&nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; border: 2px ridge silver ;&nbsp; &nbsp; &nbsp; border-radius: 2px;&nbsp; &nbsp; }&nbsp;<div class="vertical-line" style="height: 45px;"></div>