0

下の画像のように、次/前のボタンを作成して、コンテンツ内を前後に移動しようとしています。ここにボタンの背景画像があります：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;
}
4

4 に答える 4

2

に追加するのを忘れましheightた#button-next。

を使用したい場合は、それを機能させるためleftに を使用する必要がありますposition:relative/absolute/fixed。

JSFiddle

于 2013-09-13T05:53:18.743 に答える
0

この 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;
}
于 2013-09-13T05:59:57.553 に答える
0

このような

デモ

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>
于 2013-09-13T05:55:55.497 に答える