创建一个无限的水平线



我想创建一个无限的水平div。但是,我不知道如何做到这一点。

有人能帮我做这个代码作为起点吗?

请看看这张图片,来理解这个无限的水平div应该是怎样的。

谢谢!

通过"无限"我假设你的意思是到窗口/窗口的结束。你可以尝试一个绝对定位的元素;

这将是一个叠加,出现在任何正常文档流的顶部

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

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

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

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

的例子。

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

最新更新