如何从div容器的开头绘制列表元素的行？

Question

实例http://jsfiddle.net/vro0om/yhvnh/

我试图绘制在嵌套ul中分隔2个li元素的线。但是该行采用容器ul的宽度而不是包含完整结构的div。在上面提到的例子中，我使用了嵌套的ul，但在我的工作中使用ng-repeat来获得相同的效果。

.unstyled {

    padding-left: 24px;

}
.titleSeperator
 {
   background: black ;
   margin-top: 0px;
   margin-bottom: 0px;
   height : 1px;
   width:100%;
 }

Answer 1

我认为有一种更简单的方法可以做你想做的事。

首先，删除所有.titleSeperator div。然后，为父ul使用以下CSS代码：

ul.lines {
    line-height: 1.4em;
    background: linear-gradient(white 95%, black 5%);
    background-size: 100% 1.4em;
    background-origin: content-box;
} 

新小提琴：http://jsfiddle.net/yhvnh/2/

CSS的一些解释：

• line-gradient允许创建以95％的白色开头并以5％的黑色结尾的渐变
• background-size定义渐变的大小：宽度100％和高度1.4em（应与line-height相同）
• background-origin指定background-position属性相对于
的内容

Answer 2

您可以在最顶层position: relative; overflow: hidden;设置ul并使分隔符绝对定位

.titleSeperator {
    background: black;
    height : 1px;
    width: 10000px;
    position: absolute;
    left: 0;
}

演示：http://jsfiddle.net/yhvnh/3/

然而，卢卡斯提出了更好的方法，所以如果可以的话，请使用它，你应该避免冗余的HTML元素。

变式2

您还可以使用:before伪元素而不是冗余.titleSeparator div

.unstyled > li:before {
    content:'';
    background: black;
    height : 1px;
    width: 10000px;
    position: absolute;
    left: 0;
}

演示：http://jsfiddle.net/yhvnh/4/