如何使用 CSS 让 5 个按钮像这样对齐答案

【问题标题】：How to use CSS to get 5 buttons aligned like this如何使用 CSS 让 5 个按钮像这样对齐
【发布时间】：2010-11-14 12:48:19
【问题描述】：

我正在努力获得像我在 CSS 中放入这张图片的设计。

我正在使用 wordpress，我的主题只是在顶部添加了一个完整的图像，我想充分利用空间。

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

我已经将所有按钮作为单个图像（此时我更喜欢不使用精灵）并且每个图像都有一个轻量版，以显示“悬停”。

谢谢

【问题讨论】：

<img src="sss" style="float:left"> 用于 5 个按钮图像中的每一个？
悬停时如何让它改变？

标签： css wordpress

【解决方案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;
}

但不能保证它在所有浏览器中都能正常工作。

【讨论】：