创建无限水平线

Question

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

有人可以帮助我使用 此代码 作为起点吗？

请查看这张图片来了解这个无限水平div应该是什么样的。

谢谢你！

Answer 1

我所说的“无限”是指到wiewport/窗口的末尾。您可以尝试绝对定位的元素；

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

html

<div id="line"> </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/

Answer 2

您可以将 1 像素高的 div 设置为 100% 宽度：

 <div class="inf_line">
     
 </div>


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

示例。

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