如何在 HTML 中制作垂直线

如何使用 HTML 制作垂直线？

分割线

网友回答：

在标记周围放置一个您希望行显示到下一个的位置，并使用 CSS 设置其样式：<div>

.verticalLine {
  border-left: thick solid #ff0000;
}

<div class="verticalLine">
  some other content
</div>

分割线

网友回答：

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

<hr width="1" size="500" style="0 auto" />

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

分割线

网友回答：

您可以使用样式与您希望线条显示完全相同的空：<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>

模板简介：该模板名称为【如何在 HTML 中制作垂直线】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。