如何使用CSS來獲得像這樣對齊的5個按鈕

Question

我很努力得到像我放在CSS中的圖像的設計。

我使用wordpress，我的主題只是增加了一個完整的圖像到頂部，我想充分利用空間。

http://antinovaordemmundial.com/test/header.png

我已經所有的按鈕作爲單個圖像（在這一點上我者優先於不使用子畫面），並且每個圖像具有光版本，以顯示「上懸停」。

感謝

Answer 1

這裏是你可以做什麼：

HTML：

<ul id="menu"> 
    <li id="menu1"><a href="#">&nbsp;</a></li> 
    <li id="menu2"><a href="#">&nbsp;</a></li> 
</ul> 

的CSS：

ul#menu a { 
    text-decoration: none; 
    display: inline-block; 
    height: 50px; 
    width: 200px; 
    border: 1px solid black; 
} 

ul#menu li#menu1 a { 
    background: url('someimage'); 
} 

ul#menu li#menu1 a:hover { 
    background: url('hover_image'); 
} 

ul#menu li { 
    display: inline; 
} 

不能保證它在每個瀏覽器工作雖然。