创建无限水平线答案

【问题标题】：Create an infinite horizontal line创建无限水平线
【发布时间】：2011-08-09 16:30:57
【问题描述】：

我想创建一个无限的水平 div。但是，我不知道该怎么做。

有人可以帮助我使用this code 作为起点吗？

请看一下this image，了解这个无限的水平 div 应该是怎样的。

谢谢！

【问题讨论】：

请提供更多细节 - 水平线是否需要从右侧重新开始（即图像中的#line）并向右无限远？

标签： css html css-position

【解决方案1】：

“无限”我假设您的意思是到 wiewport/window 的末尾。你可以试试绝对定位的元素；

这将是一个覆盖，出现在正常文档流中的任何内容之上

html

<div id="line">&nbsp;</div>

css

#line {
    position: absolute;
    right: 0;
    margin-left: 100px;
    left: 50%; /* seeing as content is centered, make margin-left start at center of page */
    bottom: 10%;
    height: 20px;
    background-color: red;
}

演示地址：http://jsfiddle.net/PstWc/2/

【讨论】：

【解决方案2】：

您可以使用 1px 高的 div 设置为 100% 宽度：

 <div class="inf_line">
    &nbsp;
 </div>


.inf_line {width: 100%; height: 1px; background-color: #333; margin-bottom: 10px;}

Example.

可能不是最优雅的方式，但它是一种方式。

【讨论】：