我需要一些帮助对齐我的导航栏在css

Question

我对网页设计相当陌生，但很好地理解它。只是，当涉及数学时，我完全迷失了O.O.几乎我在导航栏上做的是，我创建了一个精灵，现在使用精灵的两个不同的一半来创建链接效果。哦，还有超链接涉及btw也是我用跨度标签堵塞所以是的。所以，如果有人可以请帮助我，这里是我的乐队页面http://atfamusic.hostei.com/#（在Firefox中最好的工作还是要解决这个问题），没有太多关于它的东西，所以是的。代码是（对于css）

#navigation { margin:0; padding:0; width:900px; height:50px; 
       background-image:url(navigation-background.gif); } 

#navigation li { margin:0; padding:0; list-style-type:none; display:inline; height:44px; 
       text-align:center; float:left; line-height:40px; } 

#navigation a { display:block; height:44px; } 
#navigation a:hover { background-image:url(navigation-background.gif); } 

#nav-bio {width:81px; } 
#nav-bio a:hover { background-position:85px bottom; } 

#nav-photos { width:116px; } 
#nav-photos a:hover { background-position:-166px bottom ; } 

#nav-music { width:102px; } 
#nav-music a:hover { background-position:-197px bottom ; } 

#nav-videos { width:108px; } 
#nav-videos a:hover { background-position:-278px bottom; } 

#nav-external sites { width:202px; } 
#nav-external sites a:hover { background-position:-556px bottom; } 

#nav-merch { width:120px; } 
#nav-merch a:hover { background-position:-1112px bottom; } 

#navigation span { display:none; } 

所以是啊，请帮忙。哦，如果有人可以找出为什么标题不对齐在互联网浏览器，这将是伟大的！ :)

P.S.如果愿意做额外的中心导航栏以及\ m /那真棒。对不起，如果我吸了，是一个新手：P

Answer 1

`enter code here`plz use this css 



For bio 
#nav-bio { 
    width: 166px; 
} 
#nav-bio a:hover { 
    background-position: 0px 90%; 
} 

For Photos 
#nav-photos a:hover { 
    background-position: 734px 90%; 
} 

For music 
#nav-music a:hover { 
    background-position: -282px 90%; 
} 

For Videos 
#nav-videos a:hover { 
    background-position: -384px 90%; 
} 
For external(plz change the class name in html code) 
#nav-external { 
    width: 201px; 
} 
#nav-external a:hover { 
    background-position: -492px 90%; 
} 

for merch 
#nav-merch { 
    width: 120px; 
} 
#nav-merch a:hover { 
    background-position: -693px 90%; 
} 

Answer 2

您好@xripper下面的HTML和CSS将解决您的导航问题。我移除了UL李一的标签，因为他们是没有必要的，我不是缩进使用CSS，这意味着一个的将仍然是屏幕阅读器等

<ul id="navigation"> 
    <li id="nav-bio"><a href="#">Bio</a></li> 

    <li id="nav-photos"><a href="#">Photos</a></li> 

    <li id="nav-music"><a href="#">Music</a></li> 

    <li id="nav-videos"><a href="#">Videos</a></li> 

    <li id="nav-externalsites"><a href="#">External Sites</a></li> 

    <li id="nav-merch"><a href="#">Merch</a></li> 
</ul> 

下面CSS将解决你的精灵访问的文本在导航

ul#navigation { 
    margin: 0 auto; 
    padding: 0; 
    width: 900px; 
    height: 50px; 
    background-image: url(navigation-background.gif); 
    } 

    ul#navigation li { 
     margin: 0; 
     padding: 0; 
     list-style-type: none; 
     display: inline; 
     height: 50px; 
     text-align: center; 
     float: left; 
     line-height: 40px; 
     position: relative; 
     } 

     ul#navigation li a { 
      display: block; 
      height: 50px; 
      text-indent: -999em; 
      } 

     ul#navigation li a:hover { 
      background: url(navigation-background.gif) bottom left no-repeat; 
      } 

    ul#navigation li#nav-bio { 
     width: 81px; 
     margin-left: 84px; 
     } 

     ul#navigation li#nav-bio a:hover { 
      background-position: -84px bottom; 
      } 

    ul#navigation li#nav-photos { 
     width: 116px; 
     } 

     ul#navigation li#nav-photos a:hover { 
      background-position: -165px bottom; 
      } 

    ul#navigation li#nav-music { 
     width: 102px; 
     } 

     ul#navigation li#nav-music a:hover { 
      background-position: -281px bottom; 
      } 

    ul#navigation li#nav-videos { 
     width: 108px; 
     } 

     ul#navigation li#nav-videos a:hover { 
      background-position: -383px bottom; 
      } 

    ul#navigation li#nav-externalsites { 
     width: 202px; 
     } 

     ul#navigation li#nav-externalsites a:hover { 
      background-position: -491px bottom; 
      } 

    ul#navigation li#nav-merch { 
     width: 120px; 
     } 

     ul#navigation li#nav-merch a:hover { 
      background-position: -693px bottom; 
      } 

我相信，这将工作跨浏览器，但我目前无法访问IE浏览器。让我知道它是否适合你，如果没有，我会尽力帮助。