使用CSS精灵的下一个上一个按钮

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

Answer 2

喜欢这个

<强> demo

<强> CSS

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

    height: 25px;// `add height;` you `missing height`

}

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

    z-index: 10;
    cursor: pointer;

    opacity: 0.8;


     float:left;
}
.pull-right{
    float:right;
}

<强> HTML

<div class="pull-right">
    <span id="button-previous"></span> <span id="button-next"></span>
</div> 

Answer 3

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

1. 缺少元素的高度

2. 对于CSS精灵按钮，您应该修改背景位置以适合图像（-29px）

http://jsfiddle.net/uqBdS/

Answer 4

使用此CSS DEMO HERE

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

}

#button-previous {
    width: 25px;
    height: 25px;  /*Added Height*/
    left:25px;  
    display: block;
    background: url("http://i43.tinypic.com/25alqv7.png") no-repeat scroll 0px 0px transparent;
      z-index: 10;
    cursor: pointer;
      opacity: 0.8;
}