Css 嵌套ul/li上的下边框不是整个宽度

修复了它我在gRow类中添加了一个负的左边距，等于周围容器的宽度（在我的例子中是744px）。它似乎在Chrome和IE中都能工作。但在我的小提琴中却不能工作：-

我有一个无序的列表描绘了一个树状结构。每个li都包含一个带有class=“gRow”的div元素。此div包含网格中带有“单元格”的其他div。我希望在每个增长（或li？）上添加一个边框底部，以保持li上的填充，但同时使边框底部与所有li/增长（容器的整个宽度）的宽度相同

我正在使用Ajax动态添加新的级别，但我不知道结构的深度

这就是我取得的成绩：

我的css是这样的

ul {margin: 0;padding: 0;list-style-type: none;}
li { padding-left: 16px;}
.gRow { border-bottom: 1px #CCD9E0 solid;height: 20px; margin-left: -744px;}

下面是一个JSFIDLE：

希望你能帮忙。

---

提前感谢。

尝试将li上的边距设置为0

ul {margin: 0;padding: 0;list-style-type: none;}
li { margin: 0; padding-left: 16px;}
.gRow { border-bottom: 1px #CCD9E0 solid;height: 20px; }

---

我在gRow类中添加了一个负的左边距，它等于周围容器的宽度（在我的例子中是744px）。它似乎在Chrome和IE中都起作用。但在我的小提琴中不起作用：-？

如果您想在左边框和列表项之间留一个空格，请在列表中添加左填充