如何在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 自定义元素(或纯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不会扩展到包含元素的高度.使用边距将线条置于容器中心.

实例化

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 元素使用高度/宽度来绘制一条垂直线。

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

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

Answer 9

旋转<hr>90 度：

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

Answer 10

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

1. 方法:您加载线图像.然后你设置它的样式"height: 100px ; width: 2px"

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

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>水平线有一个标签。它也可以与 CSS 一起使用来制作水平线：

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

<hr class="divider">

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