HTML 垂直线分隔符

Question

我创建了一个水平线分隔符，如下所示：

/* line separator */

.aSeparator {
  border-top: 1px solid #5f656d;
  height: 1px;
  margin: 16px 0;
}

<div class="aSeparator"></div>

在这里查看：https://jsfiddle.net/xjna71pn/

这很酷，因为它保持了窗口的长度减去填充。

我的问题是，如何创建一个垂直的？

我尝试了显而易见的方法，

border-left

但似乎不起作用。

Answer 1

这正是我实现的：

HTML 中：

<div class="vertLine">
    /* Some content, you want to the left of the vertical line.*/
</div>

在CSS中：

.vertLine {
    border-right:1px #ff0000;    /* line 1 pixel width, length of "Some content" */
}

与其他人的建议略有不同，但这正是我正在寻找的东西。

您不需要指定高度/长度，因为它只是您在其之间放置的内容的高度。例如。如果您放置 100 像素的图像，该线将位于右侧，高度为 100 像素。

Answer 2

它确实适用于左边框，但您需要指定更高的高度（当前设置为 1px）。

Answer 3

您需要设置特定的高度。你的垂直分隔符CSS将是这样的：

.aVerticalSeparator {
    border-left: 1px solid #5f656d; /* Border on the left */
    width: 1px; /* Width instead of height */
    height: 200px;
}

要使其占据父元素的整个高度，必须将其高度设置为

100%

，但父元素必须有高度。

这是一个带有简单 html 文档的演示，其中根元素（

html

和

body

）设置了特定的高度，因此分隔符最多可以填充 100%。

Answer 4

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>