1

CSS，我的另一个明显弱点，正在杀死我。

这篇文章的海报很慷慨地向我展示了如何将滑块附加到 div，但我认为我需要向上和向下按钮，因为我的滚动条可能有很多步骤。

我不会让自己感到尴尬或让你厌烦我所有的迭代，这些迭代都是完全错误的。

有人可以告诉我如何在垂直滑块的顶部和底部附加一个 jQuery UI 图标，使其看起来像一个滚动条，以便它与上面帖子中提供的 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 回答