无序列表将无法在div内正确对齐

Question

我正在用图像制作NavBar。

图片位于列表项li内，该列表项位于ul内的无序列表div内。

我遇到的问题是，当我创建一个显示内联的无序列表时，它不会像div那样对齐div的左边，它开始大约40像素。我尝试设置position:absolute;left:0;在ul但它没有任何区别。

position:absolute;应该使其相对于其父元素对齐，但它没有这样做。

这是显示问题的JSFiddle。

（红色区块是div，红色只是为了显示div的一侧，所以你可以看到ul的距离）

有什么我想念的吗？为什么图像在它应该的位置右侧40像素处开始？

Answer 1

您需要添加填充：0;

#navbar ul{
    padding:0;
}

此外，您可能希望查看的两件事会导致类似的问题：

1）继承

继承是指如果你不指定某些值，它只会从父项中获取相同元素的值。

2） CSS重置

所有浏览器都有自己的默认值。如果想要完全控制，你想确保重置其中一些值。它可能会极少影响您网站的加载速度。

Answer 2

CSS

#navbar ul{
    position:absolute;
    left:0px;
    margin:0 0 0 0;
    padding: 0 0 0 0;
}

Answer 3

ul和其他列表默认情况下为40px padding-left，在较旧的IE中为margin，因此只需删除填充和边距。