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

回答

相關問題