javascript - 缩略图在 Nivo slider 中相互堆叠

Question

我正在使用 Nivo slider ，缩略图相互堆叠，但问题完全与 CSS 相关。

演示页面位于 http://jsbin.com/ebomu4我似乎无法将它们拉下来。

Answer 1

这是我修改的内容，基本上去掉了你之前的内容。演示可以在这里查看 jsfiddle nivo-slider :

.nivo-controlNav {
    position:absolute;
    left: 0px;  //i set the navigation thumb all the way to the left because the size of your thumb + padding + margin was making it overflow to new rows
    bottom:-350px; //setting the navControl position relative to the slide
}

//here is what i added
 .nivo-controlNav a {
    display:inline;
}

.nivo-controlNav img {
    display:inline;
    position:relative;
    margin-right:10px;
}

.nivo-controlNav a.active img {
    border:1px solid #000;
}

我将导航缩略图一直设置到左侧，因为缩略图 + 填充 + 边距的大小使其溢出到新行。我还通过设置 bottom:-350px; 设置了相对于幻灯片的 navControl 位置 我添加了 .nivo-controlNav 的 a img 和 img 的事件状态使其显示出来，但由于 slider 的宽度，它会溢出到第 2 行。希望这会有所帮助。