如何在我的网站上创建一条垂直线？ [复制]答案

【问题标题】：How do I create a vertical line across my website? [duplicate]如何在我的网站上创建一条垂直线？ [复制]
【发布时间】：2014-12-01 16:20:43
【问题描述】：

我想在我的 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;

【问题讨论】：

你能添加一张你想要的图片吗？
在这种情况下，为什么在导航栏列中添加边框还不够？至于您的问题，100% 的高度可能很棘手，尤其是使用 IE（请参阅stackoverflow.com/questions/16811716/… - 如果您正在寻找的话）。您可以阅读一些有关 CSS 布局的教程，我认为这可能会对您有所帮助。例如，谷歌为我提供了 learnlayout.com 和 css-tricks.com/downloads/layouts-templates 之类的资源（CSS 技巧通常是这类东西的好资源）。
@user3437460 执行社区审核任务的人并不讨厌。当存在数百个具有不同质量答案的重复问题时，该站点就失去了作为资源的价值。社区试图找到最好和最完整的答案，比如你链接到的那个，然后关闭它的重复项。这样，当您在 Google 上搜索时，您更有可能找到答案。不要把它当作个人，这不是一种与社区接触的建设性方式。
@ChrisBaker 我同意你所说的，但有时一个明显不是重复的问题会在发布后几秒钟内被标记为重复，而实际上它不是。有时我们不能否认社区审核就像一把双刃剑。

标签： html css

【解决方案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/

【讨论】：

另外，你也可以不使用vline 元素，只需在text-left 元素中添加这样的样式：border-right: 1px solid #ccc;

【解决方案2】：

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

【讨论】：