css - 添加更多幻灯片后 Nivo slider 元素符号 "are not centered"

Question

我在我的 Wordpress 和 vBulletin 中使用 Nivo Slider 和 Iframe 。但是当我添加更多幻灯片时，导航元素符号转向右侧，并且不再居中。 我只知道 CSS，不知道 jquery。我该如何解决这个问题？

屏幕截图:http://up.vbiran.ir/images/e7r4xxdp09ms0bafb4f.jpg

Answer 1

如果您在页面中使用基于默认主题的 slider 的多个实例，上述解决方案可能会出现问题。
可能的解决方案:
1> 在 nivo-controlNav 类前面加上您要更改的 slider 的 id 前缀。 例如:如果您有一个 ID 为 nivoSlider123 的 slider ，则应将边距重写为:

jQuery('div#nivoSlider123 .nivo-controlNav').css('position:absolute;left:50%;bottom:-42px;margin-left:-40px;');

现在您可以调整 margin-left 的值，而不会影响其他 slider 。

2> 使用更通用的 CSS 代码:

.theme-default .nivo-controlNav {
    position:absolute;
    bottom:-42px;
    /*left:50%; margin-left:-40px;*/ /* Tweak this to center bullets */
    width:100%;text-align:center;
}
.theme-default .nivo-controlNav a {
    /*display:block;width:22px;height:22px;background:url(bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;*/
    display:inline-block !important; width:22px; height:22px; background:url(bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px;
}

希望这有帮助。