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

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

您无需指定高度/长度，因为它只是您放置在其中的内容的高度。例如。如果您放置100px图像，则该线将在右侧，100px高。

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%，但父元素必须具有高度。

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

Answer 4

div的右侧垂直线

＆＃13;

    <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>

＆＃13;

垂直线留给div

＆＃13;

    <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>

＆＃13;

HTML垂直行分隔符

4 个答案: