Question

好的，我对CSS很新，并遵循这个Rollover Buttons代码（http://www.elated.com/articles/css-rollover-buttons/）。问题是我想要9个按钮（3x3）。如果我重复代码并重命名id，它们都会在页面中重复排列。我想我想制作div，但不知道下一步该去哪里。

HTML：

<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a>

CSS：

#emailUs
{
    display: block;
    width: 107px;
    height: 23px;
    background: url("emailUs.gif") no-repeat 0 0;
}

#emailUs:hover
{ 
    background-position: 0 -23px;
}

#emailUs span
{
    position: absolute;
    top: -999em;
}

我现在如何重复此代码，以便在3x3网格中有9个按钮？

Answer 1

有很多方法可以解决这个问题，最简单的方法可能是制作三个div，每个div都是一行三个链接。你可以看到它here on codepen

Answer 2

你可以把所有9个标签放到这样的<div id="wrapper"> 9*<a href="..."> </div>.因为你的标签有固定的宽度（107px），你可以强制你的包装器固定宽度为240px，但你仍然需要删除display：block ;

尝试黑客攻击这个小提琴：http://jsfiddle.net/bk44c/

网格的其他解决方案：为您的标记添加float: left; margin: 5px并增加包装的宽度width: 400px;

此致

div中的翻转按钮

2 个答案: