竖直的 hr 标签

Question

有没有类似于hr标签，但是是垂直的？

我不想使用表格，但基本上我有两个选项卡，我希望在这些选项卡的标题之间有一条线。

这里是一个快速的jsfiddle。

编辑：使用border-right的jsfiddle的新版本

编辑：足够接近了！但是如果我在friendsH和familyH中而不是header中放置padding-top = 10，则出于某种原因它完美地工作，但是然后这些东西不会垂直居中，所以我认为我更喜欢这种方式

这个似乎是一种hack方法，但如果这是唯一的方法，那么我想这就是同样的问题。

- Tom Prats

---

最好使用CSS边框属性。 - Dan

要么使用边框，如果元素高度不同且您希望其与最高的匹配，则我编写了一个jQuery函数来实现此目的。如果您需要，请告诉我。 - ClarkeyBoy

能到达 hr 标签吗？因为在更新的 jsfiddle 中，我使用了边框但它不是很完美。我明确设置了框的宽度和高度。 - Tom Prats

你可能需要调整填充、边距和高度属性，以便它覆盖整个高度。 - ClarkeyBoy

Answer 1

是的，你可以。<hr style="display: inline" />会生成一条垂直线。

（但在IE7中无法实现，所以你可能需要使用条件注释来隐藏它或将其替换为|）

- Niet the Dark Absol

---

将其替换为 |。你能详细说明一下吗？ - Ram

这种方法有点用，但我无法将其调整到所需的高度。 - Tom Prats

在我的情况下，我喜欢放置<span class="vr">|</span>，然后使用条件显示注释 <!--[if IE gt 7]>--> ... <!--<![endif]--> 来包含一个脚本，用于替换 span.vr 为“垂直线”... 换句话说，我是反过来做的，以提供更好的体验给旧浏览器用户。 - Niet the Dark Absol

Answer 2

网页上没有"竖直"的hr标签。您可以使用"border-left"和"border-right" css属性来实现此效果。

- Rishav Rastogi

---

它几乎可以工作，但看起来有点奇怪，它没有达到下面的hr线。你有什么想法如何解决这个问题？我更新了fiddle。 - Tom Prats

可以使用“border-bottom”代替hr标签。 - Rishav Rastogi

Answer 3

没有垂直的hr标签，但是您可以使用CSS来制作垂直的hr。

.vhr {
  width: 1px;
  height: 200px;

  }

<div class="v-hr"></div>

- alfalasi

Answer 4

HTML本身没有原生的分割线。你可以使用CSS来创建一个非常窄的div，例如只在一侧添加边框或图像背景。如果你正在使用jQuery，你可能会找到一个插件来完成这个功能，但它可能会有更多的功能，比如允许用户拖动和调整分割区域。

- Robert

Answer 5

这样怎么样：

http://jsfiddle.net/tprats108/r7rzt/14/

- Johndave Decano

Answer 6

最近我学到了一个技巧，可以制作出垂直的<hr>线：

<hr width="1" size="500" style="display:inline-block;">

- Alex W