更多的Zen和CSS

Question

我仍然在尝试让sprites正常工作，并且继续感到困惑，因为我似乎找不到与我想要的匹配的示例。基本上我有一系列16x16的图标需要排成一行。我似乎找不到合适的元素来使用和设置背景图像。

我尝试过div，它们可以在块模式下工作，但不能在内联模式下工作。我尝试过span，a，li和许多其他的网站。所有这些在display:inline中的设置都不允许我设置元素的宽度，所以我只能得到几个像素的背景图像。如果我放入几个nbsp，它将会工作，但在我看来这不是正确的解决方案。

是否有一个URL在一行中有一系列小图标，这些图标使用精灵作为其背景图像？最好是我能做的元素:悬停在上面？

Answer 1

如果你必须使用display:inline，那么你必须把你的元素放在一个容器中。一个常见的例子是：

<ul>
    <li><a></a></li>
    <li><a></a></li>
</ul>

将li元素设置为display:inline，将a元素设置为display:block。然后，您可以随子画面一起向a元素添加宽度，并且li元素会强制a元素水平放置。

您可以找到使用此方法here的教程。

Answer 2

Stackoverflow使用这种技术。如果您右键单击向上投票/向下投票箭头，然后单击查看背景图像(在Firefox中)，您将被带到精灵图像。从源代码来看，他们使用的是跨度。您应该能够使用CSS设置跨度的宽度和高度。

如果您愿意，您可以使用来使用

display: block; float: left;

元素将排成一行，就好像它们是内联的一样。然后，您也可以使用CSS设置高度和宽度。