CSS 导航菜单未正确定位答案

【问题标题】：CSS Navigation Menu Not Positioning CorrectlyCSS 导航菜单未正确定位
【发布时间】：2011-06-21 04:14:48
【问题描述】：

我的 CSS 导航菜单有一个奇怪的问题。代码在这里：

<style>
.navigation { width: 1010px; }
.navigation li { float: left; display: inline;}

.navigation li a { display: block; height: 60px; text-indent: -9999px; background:     #EFE8C9 url(../images/bg/primary_navigation.gif) no-repeat 0 0;}
#link1 { width: 96px; background-position: 0 0; }
#link1:hover { background-position: 0 -60px; }
#link2 { width: 166px; background-position: -96px 0; }
#link2:hover { background-position: -96px -60px; }
#link3{ width: 138px; background-position: -262px 0; }
#link3:hover { background-position: -262px -60px; }
#link4 { width: 166px; background-position: -400px 0; }
#link4:hover { background-position: -400px -60px; }
#link5{ width: 134px; background-position: -566px 0; }
#link5:hover { background-position: -566px -60px; }
#link6 { width: 76px; background-position: -700px 0; }
#link6:hover { background-position: -700px -60px; }
#link7 { width: 108px; background-position: -776px 0; }
#link7:hover { background-position: -776px -60px; }
#link8 { width: 126px; background-position: -884px 0; }
#link8:hover { background-position: -884px -60px; }
</style>
<html>
<div id="primary_navigation">
<ul class="navigation">
    <li><a href="#" id="link1">Link 1</a></li>
    <li><a href="#" id="link2">Link 2</a></li>
    <li><a href="#" id="link3">Link 3</a></li>
    <li><a href="#" id="link4">Link 4</a></li>
    <li><a href="#" id="link5">Link 5</a></li>
    <li><a href="#" id="link6">Link 6</a></li>
    <li><a href="#" id="link7">Link 7</a></li>
    <li><a href="#" id="link8">Link 8</a></li>
</ul>
</div>
</html>

您将看到菜单位置偏离了大约 40 像素，我不知道为什么。我已经建立了很多这样的菜单，从来没有遇到过这个问题！

我尝试使用几个运行良好的版本并将它们调整到此菜单，但一旦我测试它，就会出现同样的问题。

我也尝试在论坛中搜索类似问题，但没有成功。

非常感谢任何帮助。

感谢您的宝贵时间。

【问题讨论】：

你有validated页面吗？
对于遗留问题，请在此处也发布您的相关代码，它将比您的网站寿命更长，因此未来的用户可以从这个问题中学到一些东西。

标签： html css navigation positioning

【解决方案1】：

在navigation 类的填充中添加一个reset：

ul.navigation {
    padding: 0;
    ..... rest of the css
}

【讨论】：

@Victor J：这仅仅是因为您输入了错误的width 值。 #donate 的 width 应该是 126px，而不是 116px。
@thirtydot：正确，我在添加上面的代码时意识到并更正了它。非常感谢您的宝贵时间，我非常感谢这个论坛！

【解决方案2】：

您的<ul> 需要重置。

#navigation { padding:0; }

【讨论】：