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

时间:2013-01-09 06:00:35

标签: css html-lists border

修正了它!我在gRow类中添加了一个负左边距,等于周围容器的宽度(在我的情况下是744px)。它似乎在Chrome和IE中都有效。但它在我的小提琴中不起作用: - ?

我有一个描绘树状结构的无序列表。每个li包含一个div =“gRow”的div元素。此div包含网格中带有“单元格”的其他div。我想在每个gRow(或li?)上添加一个border-bottom,在li上保持padding-left,但同时使border-bottom与所有li / gRows的宽度相同(整个宽度为容器)。

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

这是我走了多远:

enter image description here

我的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/

希望你能提供帮助。 提前谢谢。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

我在gRow类中添加了一个负左边距,等于周围容器的宽度(在我的情况下为744px)。它似乎在Chrome和IE中都有效。但它在我的小提琴中不起作用: - ?