html - 导航 Sprite 未对齐

Question

再次请求你们的帮助......

不确定这里发生了什么，我的导航翻转没有正确对齐，我已经检查了我的测量结果，据我所知并非如此。我使用 Margin:0 auto 将导航对齐到页面的中心；我想知道这是否是问题所在？

我创建了一个 Fiddle http://jsfiddle.net/ca9rv/理解我在胡说八道的内容(不确定为什么底部有一条蓝线 - 在本地查看我的 html 页面时不会显示)。

<ul id="navigation">
    <li id="home"><a href="index.html">Home</a></li>
    <li id="promise"><a href="Our Promise">Our Promise</a></li>
    <li id="restaurants"><a href="Our Restaurants">Resume</a></li>
    <li id="contact"><a href="#">Contact</a></li>
</ul>

#navigation {
    background:url(http://img33.imageshack.us/img33/7388/navigationq.png) no-repeat;
    width: 940px;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    margin-bottom:20px;
}

#navigation li, #navigation a {
    height: 50px;
    display: block;
}

#navigation li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
}

#home { width: 103px; }
#promise { width: 176px; }
#restaurants { width: 206px; }
#contact { width: 151px; }

#home a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") 0px -50px no-repeat; }
#promise a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") -103px -50px no-repeat; }
#restaurants a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") -277px -50px no-repeat; }
#contact a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") -482px -50px no-repeat; }

Answer 1

更改您的 位置值 和宽度

像这样

#home { width: 88px; }
#promise { width: 147px; }
#restaurants { width: 176px; }
#contact { width: 128px; }

#home a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") 0px -42px no-repeat; }
#promise a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") -91px -42px no-repeat; }
#restaurants a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") -236px -42px no-repeat; }
#contact a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") -411px -42px no-repeat; }

Demo