如何在HTML中制作垂直线

Question

如何使用HTML制作垂直线？

- Gopal

---

W3能否更聪明一些，为<vr>添加一个规范呢？ - OverCoder

Answer 1

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

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

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

- Kris van der Mast

---

将风格与内容结合并非对许多人来说是禁忌。 <div style="border-left:thin solid #0000ff">我无话可说，我正在说它。</div> - ctpenrose

@ctpenrose，确实不是禁忌，但将它们分开很方便，这样如果需要的话就可以在一个地方轻松调整。将其放在单独的CSS文件中对性能更好，因为浏览器可以缓存它，每次请求渲染的HTML时传输的字节数会更少。 - Kris van der Mast

这是其中一种方法，但你几乎总是会得到类似这样的结果：ul.page_cp > li:not(:first-child) { ... - papo

Answer 2

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

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

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

- Anthony

---

太棒了，先生。那是一个很酷的技巧。但仍需要将其设置为“display:inline-block”，否则它无法与其他内联元素很好地并排显示。 - Alex W

我认为这在Firefox中不起作用。该行存在，但似乎不可见... - Edd

感谢您提供这段代码。这是一个可工作的示例jsfiddle链接：http://jsfiddle.net/ccatto/c8RQc/ - Catto

Giulio因为它实际上并没有将屏幕分成两列。你需要使用一些CSS样式来获得所需的结果，就像div一样。 - Ismail Sahin

我更喜欢这种方式，因为它避免了一个隐藏的 div 只有一边有可见边框的奇怪情况。尽管这不是你通常使用 hr 的方式，但对我来说仍然更有意义。 - levininja

不确定这在过去的10年里是否有所改变，但是根据我在2023年的检查，要获得一条适当细线，您需要使用<hr width="0" ... />。 - undefined

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>

- awe

Answer 4

你也可以使用HTML水平线<hr />创建垂直线。

html, body{height: 100%;}

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

<hr class="vertical" />

- Ishan Jain

---

一个很棒的技巧，可以让线条的样式与标准的<hr>相同。可能还需要额外的样式来浮动在内容的一侧（例如：float:left;）。 - awe

这个“竖直”的规则仍然像普通的水平规则一样在垂直方向上分隔（文本）元素。 - Qwerty

Answer 5

没有垂直等效于<hr>元素。然而，您可以尝试的一种方法是在您要分隔的内容左侧或右侧使用简单的边框:

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

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

- Daniel Vassallo

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不会扩展到包含元素的高度。使用边距在容器内居中该行。

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;*/
}

*请查看上面的注释。

- Qwerty

---

对于其限制感到遗憾，但在其他一些地方看起来确实非常有用。 - Smar

它没有填满整个div的大小，如何修复？ - Otávio Barreto

@OtávioBarreto 你可能需要调整已注释的 display 属性。将其设置为 inline 或 inline-block 中的一个。请参见上面的注释和示例网址。 - Qwerty

Answer 7

另一个选择是使用一个1像素的图片，并设置高度 - 这个选项可以让你将其浮动到需要的位置。

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

- chris

Answer 8

通过使用任何HTML元素的高度/宽度，您可以轻松绘制垂直线。

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

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

- Aamir Shahzad

Answer 9

将 <hr> 旋转90度：

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

- MeKoo Solutions

---

非常棒的解决方案。谢谢你。 - undefined

Answer 10

在IT技术中有一个用于横线的标签是<hr>。该标签可以与CSS结合使用，制作横线：

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

<hr class="divider">

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

- Muminur Rahman