Javascript 如何从div容器开始为list元素画一条线？

活生生的例子

我试图在嵌套的ul中画出分隔两个li元素的线。但该行采用容器ul的宽度，而不是包含完整结构的div。在上述示例中，我使用了嵌套ul，但在我的工作中，使用ng repeat获得相同的效果

.unstyled {

    padding-left: 24px;

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

---

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

首先，删除所有

.titleSeperator

div。然后，将以下CSS代码用于父级

ul

：

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

新小提琴：

CSS的一些解释：

• 线条渐变

  允许创建以95%白色开始，以5%黑色结束的渐变

• 背景大小

  定义渐变的大小：宽度100%，高度1.4em（应与

  线条高度相同

  ）

• background origin

  指定背景位置属性应该相对于什么

---

您可以设置

位置：相对；溢出：隐藏

在最上面的

ul

上，并使分离器处于绝对位置

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

演示： 然而Lucas提出了更好的方法，所以如果可以的话就使用它，应该避免冗余的HTML元素

变式2 您还可以使用

：before

伪元素代替冗余的

。titleSeparator

divs

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

---

演示：像这样：？@dfsq no不在右边，但接触divHi的左边距。我使用的是px表示法，它不支持它，格式会受到干扰。例如，您只需将1.4em替换为16px。