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

Question

我正在尝试创建一个如下图所示的 Next/Previous 按钮，以便在某些内容中来回导航。我在这里有按钮的背景图片：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

像这样

演示

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 sprite 按钮，您应该修改背景位置以适合图像（-29px）

http://jsfiddle.net/uqBdS/

Answer 4

在此处使用此 CSS演示

#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;
}