css - 嵌套 ul/li 的底部边框不是整个宽度

Question

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

我有一个描述树状结构的无序列表。每个 li 包含一个带有 class="gRow" 的 div 元素。此 div 在网格中包含其他带有“单元格”的 div。我想在每个 gRow （或 li？）上添加一个边框底部，保持 li 上的 padding-left 但同时让所有 li/gRows 的边框底部宽度相同（整个宽度容器）。

我正在使用 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;}

这是一个 jsFiddle：http: //jsfiddle.net/kJQeq/

希望你能帮忙。提前致谢。

Answer 1

尝试在 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; }

Answer 2

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