如何在HTML中制作垂直线

使垂直线居中使用：

position: absolute; 
left: 50%;

我需要一条内联垂直线，所以我欺骗了一个按钮，使其变成一条线。

<button type="button" class="v_line">l</button>

.v_line {
         width: 0px;
         padding: .5em .5px;
         background-color: black;
         margin: 0px; 4px;
        }

对于内联样式，我使用以下代码：

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />

并将其直接定位在中心。

旋转<hr>90度：

<hr style="width:100px; transform:rotate(90deg);">

要添加垂直线，您需要设置hr的样式。

现在，当您制作一条垂直线时，它将出现在页面中间：

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

现在将其放在您想要的位置，您可以使用以下代码：

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

这会将其定位在左侧，您可以将其反转以将其定位在右侧。

在要应用垂直行的上一个元素中，可以设置CSS ...

border-right-width: thin;
border-right-color: black;
border-right-style: solid;

可能还有另一种方法：使用SVG。

例如：

<svg height="210" width="500">
    <line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
      Sorry, your browser does not support inline SVG.
</svg>

优点：

• 您可以具有任意长度和方向的线。
• 您可以轻松指定宽度，颜色

缺点：

• 大多数现代浏览器现在都支持SVG。但是某些旧的浏览器（例如IE 8和更早的版本）不支持它。

为什么不使用＆＃124，它是|的html特殊字符。

如果您的目标是在容器中放置垂直线以分隔并排的子元素（列元素），则可以考虑如下设计容器的样式：

.container > *:not(:first-child) {
  border-left: solid gray 2px;
}

这将从第二个子元素开始为所有子元素添加左边框。换句话说，您在相邻子级之间获得了垂直边界。

• >是一个子选择器。它与左侧指定元素的任何子元素匹配。
• *是通用选择器。它匹配任何类型的元素。
• :not(:first-child) 表示它不是其父母的第一个孩子。

浏览器支持：> *：first-child和：not（）

我认为这比简单的.child-except-first {border-left: ...}规则要好，因为让竖线来自容器的规则而不是来自不同子元素的规则更有意义。

这是否比使用临时的垂直规则元素更好（通过设置水平规则等）取决于您的用例，但这至少是一种选择。

我使用了建议的“ hr”代码的组合，这是我的代码：

<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>

我只是简单地更改了“左”像素值的值来定位它。（我使用垂直线来排列网页上的内容，然后将其删除。）

我想创建一条以div为中心的垂直线，我认为您可以使用此代码。我想，“容器”的宽度很可能是100％。

div.container {
  width: 400px;
}

div.vertical-line {
  border-left: 1px solid #808080;
  height: 350px;
  margin-left: auto;
  margin-right: auto;
  width: 1px;
}

<div class="container">
  <div class="vertical-line">&nbsp;</div>
</div>

您可以使用hr（水平线）标签，然后使用以下CSS将其旋转90度

hr {   
    transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

http://jsfiddle.net/haykaghabekyan/0c969bm6/1/

您可以通过在任何html元素中简单地使用height / width来绘制一条垂直线。

#verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
}

<div id="verticle-line"></div>

没有任何标签可以在HTML中创建垂直线。

1. 方法：您加载线条图像。然后您将其样式设置为"height: 100px ; width: 2px"

2. 方法：您可以使用<td>标签<td style="border-left: 1px solid red; padding: 5px;"> X </td>

另一种选择是使用1像素的图像，并设置高度-此选项将使您可以将其浮动到需要的位置。

虽然不是最优雅的解决方案。

没有与该<hr>元素垂直的等效项。但是，您可能要尝试的一种方法是在要分隔的内容的左侧或右侧使用简单的边框：

#your_col {
  border-left: 1px solid black;
}

<div id="your_col">
  Your content here
</div>

您也可以使用HTML水平线制作垂直线 <hr />

html, body{height: 100%;}

hr.vertical {
  width: 0px;
  height: 100%;
  /* or height in PX */
}

<hr class="vertical" />

您可以使用<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>

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

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

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

<div>在要在其下一行出现的标记周围放置一个标记，并使用CSS对其进行样式设置：

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

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