javascript - 如何从 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;
} 

新的 fiddle :http://jsfiddle.net/yhvnh/2/

CSS 的一些解释:

• line-gradient 允许创建从 95% 的白色开始到 5% 的黑色结束的渐变
• background-size 定义渐变的大小:宽100%，高1.4em(应该和line-height一样)
• background-origin 指定 background-position 属性应该相对于什么