1

私の明らかな弱点の1つであるCSSは、私を殺している。

この投稿のポスターは、divにスライダーを追加する方法を教えてくれるほど寛大でしたが、スクロールバーに大量のステップがある可能性があるため、上下のボタンが必要だと思います。

私は自分自身を当惑させたり、明らかに間違って出てきた私の反復のすべてであなたを退屈させたりしません。

誰かが垂直スライダーの上下にjQueryUIアイコンを追加して、スクロールバーのように見せて、上記の投稿で提供されているCSSで機能するようにする方法を教えてもらえますか？私にとって機能していないのはCSSです。

よろしくお願いします！

編集

素晴らしい答え、ありがとうございました。スライダーがボタンににじむのを防ぐ方法はありますか？できるだけ早くチェックを入れてみます。

どうでも。ちょうど上と下が実際に何をするかを理解しました。

最終結論

どちらの解決策も機能し、上下の出血を簡単に調整することができました。

下位互換性のためにAbody97にチェックマークを付けたので、将来的にはtomarooの方が正確になると思います。スタックが悪すぎると、複数のチェックボックスを使用できません:(

4

2 に答える 2

1

これが私の試みです：小さなリンク。

私が基本的にしたこと：最初に、HTMLを少し変更しました：

<div id="vertical-slider">
<div class = "up">/\</div>
<div class = "down">\/</div>
</div>

これをCSSに追加しました：

#vertical-slider {
    position: relative; /*necessary for the buttons' positioning to work*/
}
.up {
    position: absolute;
    top: 0; /*up there*/
    left: 0; /*on the left*/
}
.down {
    position: absolute;
    bottom: 0; /*down there*/
    left: 0; /*on the left*/
}
.up, .down {
    width: 100%; /*take up all the width inside the slider*/
    background: rgb(0, 162, 232); /*prettiness*/
    color: white; /*prettiness, too*/
    z-index: 1000; /*make sure they're not covered*/
}

クリックを自分で処理する必要があることに注意してください。ただし、これにより、視覚的なレイアウトを実現する方法がわかります。

于 2012-10-07T16:31:52.017 に答える
1

CSS:beforeと:after疑似セレクターを使用できます。

例

topとz-indexプロパティを試して、目的の外観を取得することをお勧めします。

#vertical-slider:before{
    content: url('/slidertop.png');
    position: absolute;
    top: -8px;
    z-index: 1;
}
#vertical-slider:after{
    content: url('/sliderbottom.png');
    position: absolute;
    top: 192px;
    z-index: 1;
}
于 2012-10-07T16:40:20.910 に答える