Question

我正在创建一个网站并使用Nivo Slider创建一个jQuery滑块。

我遇到了用于显示用户正在查看哪张幻灯片的项目符号的问题。我希望子弹出现在滑块的图像上，而不是下面。

我设法使用以下CSS代码将项目符号移动到该位置：

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 365px;
    z-index:3000 !important;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(../images/banner/dots.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:0px;
    float:left;
}

以下是它们应该如何显示的屏幕截图： http://i41.tinypic.com/mt59gi.png

但是一旦我调整了浏览器窗口的大小，子弹就会移出滑块，如下所示：http://i40.tinypic.com/2ldtus8.png

我改变了顶部：365px;也是一个百分比，但这似乎产生了相同的结果。

即使调整浏览器窗口大小，有没有办法将子弹保留在滑块上？滑块宽度为100％，因此滑块也会随浏览器窗口调整大小。如果可能的话，我最好保持这种方式。

非常感谢任何帮助。

编辑：我已将测试版发布到www.fearless-music.net/test /

Answer 1

对于任何相关代码都无法真正做很多事情，但我可以告诉你包含.nivo-controlNav需要position: relative的内容是什么方式，子弹将被限制在该区域内。

Answer 2

如果在调整浏览器大小时图像的宽度发生变化，那么高度很可能也是如此。

在这种情况下，如果高度正在改变您的代码“top：365px;”变得无关紧要。

IMO我会通过媒体查询调整包装器顶部的距离......这样的事情：

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 365px;
    z-index:3000 !important;
}

@media (max-width: 960px) {

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 265px;
    z-index:3000 !important;
}

}

@media (max-width: 768px) {

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 165px;
    z-index:3000 !important;
}

}

@media (max-width: 400px) {

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 65px;
    z-index:3000 !important;
}

}

我最好看看你要补偿的断点，看看图像的高度变化，然后确定你的css中“top”的必要值。

更多信息here。

Nivo Slider - 在滑块底部定位导航子弹，而不是在下面

2 个答案: