CSS List Sprite Alignment

我不能为我的生活弄清楚这一点。我列出了一个列表，并使用它来创建一个基于图像的精灵导航器。我已经完成了所有的悬停效果，并显示，但无论我尝试什么，我都无法使其对齐到页面的中心。 HTML：CSS List Sprite Alignment

<body> 
    <div id = 'logo'></div> 




    <ul id="navbar"> 
     <li id="nav-bio"><a href="#">Bio</a></li> 
     <li id="nav-music"><a href="#">Music</a></li> 
     <li id="nav-video"><a href="#">Video</a></li> 
     <li id="nav-press"><a href="#">Press</a></li> 
     <li id="nav-shows"><a href="#">Shows</a></li> 
     <li id="nav-shop"><a href="#">Shop</a></li> 
    </ul> 


    <div class = 'wrapper'> 

    <div id = 'blog'> 

    </div> 

    </div> 

</body>

CSS：

#logo{ 
    width: 100%; 
    height: 190px; 
    background:url('Loons-Title.png'); 
    background-position:center top ; 
    background-size:contain; 
    background-repeat:no-repeat; 
    } 

div.wrapper{ 
    width: 100%; 
    height: 5000px; 
    margin-left: 0%; 
    margin-right: 10%; 
    } 

#navbar { 
    height: 65px; 
    width: 700px; 
    list-style:none; 
    padding: 0; 
    margin:0; 
    overflow: hidden; 
} 

#navbar li { 
    float: left; 
} 
#navbar a { 
    display: block; 

    padding-top: 66px; 
    text-decoration: none; 
} 

#nav-bio { width: 79px; 
    background-image: url(Loons-menu-sprite.png); 
} 
#nav-bio:hover { 
    width: 79px; 
    background-position: 0px -66px; 
} 
#nav-music { width: 137px; 
    background-image: url(Loons-menu-sprite.png); 
    background-position: -79px 0px;} 
#nav-music:hover { 
    width: 137px; 
    background-position: -79px -66px; 
} 
#nav-video { 
    width: 121px; 
    background-image: url(Loons-menu-sprite.png); 
    background-position: -216px 0px; 
} 
#nav-video:hover { 
    width: 121px; 
    background-position: -216px -66px; 
} 
#nav-press { 
    width: 140px; 
    background-image: url(Loons-menu-sprite.png); 
    background-position: -337px 0px; 
} 
#nav-press:hover { 
    width: 140px; 
    background-position: -337px -66px; 
} 
#nav-shows { 
    width: 129px; 
    background-image: url(Loons-menu-sprite.png); 
    background-position: -477px 0px; 
} 
#nav-shows:hover { 
    width: 129px; 
    background-position: -477px -66px; 
} 
#nav-shop { 
    width: 94px; 
    background-image: url(Loons-menu-sprite.png); 
    background-position: -606px 0px; 
} 
#nav-shop:hover { 
    width: 94px; 
    background-position: -606px -66px; 
}

来源

2012-05-17 Russell Asher

'#navbar {保证金：0汽车;}'？ –

通常情况下最好将造型放在A标签上，而不是LI。请参阅：preview.moveable.com/JM/ilovelists –

非常感谢！我首先按照你说的方式设置了它，但深夜我感到沮丧并改变了它，看它是否会改变任何事情。现在，它的中心我将把它放回去！ –

#navbar { 
    height: 65px; 
    width: 700px; 
    list-style:none; 
    padding: 0; 
    margin:0 auto; /* change */ 
    overflow: hidden; 
}

来源

2012-05-17 20:18:32

非常感谢！ –

CSS List Sprite Alignment

回答

相关问题