html - 无序列表不会在 div 内正确对齐

Question

我正在用图像制作导航栏。

图像位于列表项li中，该列表项位于无序列表ul中，无序列表位于div.

我遇到的问题是，当我制作一个显示内联的无序列表时，它没有像应有的那样与 div 的左侧对齐，它从大约 40 像素开始。我尝试设置position:absolute;left:0;但ul它没有一个区别。

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

这是一个显示问题的JSFiddle。

（红色块是 div，它是红色的只是为了告诉你 div 的边在哪里，这样你就可以看到 ul 有多远）

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

score 2 · Accepted Answer

您需要添加填充：0；

#navbar ul{
    padding:0;
}

此外，您可能想要研究的两件事会导致您遇到类似的问题：

1)继承

继承是如果您不指定某些值，它将简单地从父母那里获取相同元素的值。

2) CSS 重置

所有浏览器对某些事物都有自己的默认值。如果您想要完全控制，您要确保重置其中一些值。它可能会对您的网站加载速度产生最小的影响。

score 2 · Accepted Answer

2

CSS

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

于 2013-05-14T02:51:55.797 回答

score 0 · Accepted Answer

ul和其他列表默认有 40px padding-left，在旧的 IE 中它是margin，所以只需删除填充和边距。

3 回答 3