css - 使用 CSS Sprite 的下一个上一个按钮

Question

我正在尝试创建一个如下图所示的下一个/上一个按钮，以便在某些内容中来回导航。我这里有按钮的背景图片:http://i43.tinypic.com/25alqv7.png

我试过下面的代码，但是下一个按钮没有出现。

你能告诉我如何像上图那样显示按钮吗？

你可以在这里看到我的代码:http://jsfiddle.net/kLqja/

HTML 代码:

<div style="float:right;">
    <span id="button-previous"></span> <span id="button-next"></span>
</div>  

CSS 代码:

#button-next {
width: 25px;   
left:0px;
display: block;
background: url("http://i43.tinypic.com/25alqv7.png") no-repeat scroll 0px 0px transparent;

}

#button-previous {
width: 25px;
height: 25px;
left:25px;  
display: block;
background: url("http://i43.tinypic.com/25alqv7.png") no-repeat scroll 0px 0px transparent;
}

Answer 1

您忘记将 height 添加到 #button-next。

如果你想使用 left，你必须使用 position:relative/absolute/fixed 来让它工作。

JSFiddle