如何使用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;
}

不能保证它在每个浏览器中都能正常工作。