如何在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>

Answer 4

您还可以使用HTML水平线<hr />

创建垂直线

html, body{height: 100%;}

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

<hr class="vertical" />

Answer 5

没有垂直等同于<hr>元素。但是，您可能想要尝试的一种方法是在分离的任何内容的左侧或右侧使用简单的边框：

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

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

Answer 6

HTML5 custom elements（或纯CSS）

1。的JavaScript

注册您的元素。

var vr = document.registerElement('v-r'); // vertical rule please, yes!

* -在所有自定义元素中都是必需的。

2。 CSS

v-r {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

*您可能需要对display:inline-block|inline进行一些调整，因为inline不会扩展到包含元素的高度。使用边距将线条置于容器中心。

3。实例

js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>

*很遗憾，您无法创建自定义自动关闭代码。

的使用

 <h1>THIS<v-r></v-r>WORKS</h1>

示例：http://html5.qry.me/vertical-rule

不想搞乱javascript？

只需将此CSS类应用于指定的元素。

CSS

.vr {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

*见上面的注释。

Answer 7

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

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

Answer 8

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

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

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

Answer 9

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

Answer 10

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

.divider{
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    width: 1px;
    background-color: red;
}

<hr class="divider">

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

Answer 11

要创建一个以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>

Answer 12

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

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

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

Answer 13

为什么不使用＆amp;＃124，这是|

的html特殊字符

Answer 14

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

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

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

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

浏览器支持：> * :first-child和:not()

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

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

Answer 15

还有一种方法：使用 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及更早版本）不支持它。

Answer 16

您可以通过使用任何html元素的高度/宽度来绘制垂直线。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 17

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>
  

Answer 18

要添加垂直线，您需要设置小时样式。

现在当你制作一条垂直线时，它将显示在页面中间：

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

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

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

这会将它置于左侧，您可以将其反转以将其置于右侧。

Answer 19

在您要应用垂直行的Previous元素中，您可以设置CSS ...

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

Answer 20

对于内联样式，我使用了这段代码：

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

并将其直接定位在中心。

Answer 21

旋转<hr> 90度：

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

Answer 22

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

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

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

Answer 23

我认为这是一种简单的方法，您可以根据需要更改向左或向右边框

.vertical-line{
border-left:1px solid #000

}

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

Answer 24

您还可以使用呈现为“|”的 HTML symbol |

Answer 25

要使垂直线在中间位置居中使用：

position: absolute; 
left: 50%;