HTML垂直分隔线

-3

我创建像这样一个水平行分隔符：HTML垂直分隔线

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

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

景观在这里：https://jsfiddle.net/xjna71pn/

这很酷，因为它停留在窗口减去的长度填充。

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

我试过很明显的，border-left但它似乎没有工作。

来源

2016-11-26 Reanimation

'border-left'应该可以工作，但是您的元素只有1px高，这可能是您认为存在问题的原因。 – Harry

http://stackoverflow.com/questions/3148415/how-to-make-a-vertical-line-in-html – marmeladze

它可以在边框左侧工作，但需要指定更高的高度（当前设置为1px）。

来源

2016-11-26 16:02:16

你需要设置一个特定的高度。您的垂直分离器的CSS会是这样的：

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

为了使它占据其母公司的整个高度，你要它的高度设置为100%，但父元素必须有一个高度。

Here's a demo带有一个简单的html文档，其中根元素（html和body）具有特定的高度集，因此分隔符可以填充高达100％。

来源

2016-11-27 04:03:54 Alan

这正是我实现：

在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像素。

来源

2016-11-27 13:46:36 Reanimation

HTML垂直分隔线

回答

相关问题