导航精灵不会再上你的帮助家伙对准

Question

呼叫..

不知道这里发生了什么，我的导航翻车没有正确对齐，我检查我的测量，从我看到它是不是。我使用Margin：0 auto将导航对齐到页面的中心位置：我想知道这是否是问题？

我创建了一个小提琴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

更改position value和width

像这样

#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

Answer 2

首先，我认为你正在做的这一切WR翁。 1.停止使用背景图片，因为您希望它缩放。 2.快速浏览一下CSS，你的宽度都是错误的。给所有元素添加一个边框，你将会看到发生了什么。 3.您有蓝色边框，因为菜单上的高度高于背景图像。

Answer 3

Jsfiddle

<style> 

#navigation { 
    background:url(http://img33.imageshack.us/img33/7388/navigationq.png) no-repeat; 
    width: 940px; 
    height: 42px; 
    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: 87px; } 
#promise { width: 149px; } 
#restaurants { width: 175px; } 
#contact { width: 130px; } 

#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") -82px -42px no-repeat; } 
#contact a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") -409px -42px no-repeat; } 
</style> 
<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>