Question

我想在我的html / css中创建一条线来将我的导航栏与网站的其他部分分开，有点像边框，但只能在网站的右侧看到。

但是与边界不同，我希望这条线能够沿着整个网站前进。那么从网站的顶部到底部，代码是什么？

请记住，我对html和css都很陌生，所以我不熟悉画布等。

我确实从另一个线程尝试了HTML和CSS，但我无法使其工作，它看起来像这样：

<div id="vLine">
    <h1>text</h1>
</pre>

#vLine {
    height: 100%;
    width: 50px;
    border-left: 3px solid black;
    border-right: 3px solid black;

Answer 1

HTML：

...
<div class="text-left">Some text on the left side...</div>
<div class="vline"></div>
<div class="text-right">Some text on the right side...</div>
...

的CSS：

html, body {height: 100%;}
.text-left, .text-right {
    width: 200px;
    float: left;
    padding: 10px;
}
.vline {
    float: left;
    height: 100%;
    width: 1px;
    background: #ccc;
}
.text-right:after { /* clearfix */
    display: block;
    content: "";
    clear: both;
}

JsFiddle：http://jsfiddle.net/v7ay7ub2/

Answer 2

首先不要通过pre关闭div标签，回答你的问题，你可以创建div或其他固定位置的标签并将它们放在你想要的地方

如何在我的网站上创建垂直线？

2 个答案: