更多禪和CSS

Question

我仍然試圖讓精靈正常工作，並繼續困惑，因爲我似乎無法找到匹配我想要的示例。基本上我有一系列16x16圖標需要排隊。我似乎無法找到正確的元素來使用並設置背景圖像。

我試過divs，他們工作在塊模式，但不是內聯模式。我試過span,a,li等等。所有這些設置在display:inline不允許我設置元素寬度，所以我只獲得幾個像素的背景圖像。如果我放幾個nbsp它會起作用，但在我看來這不是正確的解決方案。

是否有一個URL中的一系列圖標在一行中使用精靈作爲背景圖像？最好我可以做的元素：懸停在？

Answer 1

Stackoverflow使用這種技術。如果右鍵單擊upvote/downvote箭頭，然後單擊查看背景圖像（在Firefox中），您將看到精靈圖像。從查看源代碼，他們正在使用跨度。您應該可以使用CSS設置跨度的寬度和高度。

如果你願意，你可以用它來使用

display: block; float: left; 

和元素會排隊，好像他們是內聯。然後你可以用CSS設置高度和寬度。

Answer 2

如果您必須使用display：inline，那麼您必須將元素放入容器中。一個常見的例子是：

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

設置要顯示的li元素：inline和要顯示的a元素：block。然後，您可以將寬度與精靈一起添加到a元素，並且li元素將強制a元素水平放置。

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