CSS：水平滚动菜单的转换不顺畅

Question

我想让菜单过渡顺利。问题是当你单击箭头时，第二个div将显示在第一个div的底部，使其看起来不平滑。请参阅下面的代码：

请在此处查看我的代码： http://www.codeply.com/go/mdMPOkmFVH

Answer 1

在你的代码中你需要对CSS做一些基本的改变，你的CSS应该如下

.btn-arrow {
    display: inline-block;
    text-align: center;
}
.effects-list {
    text-align: center;
}
.col-xs-4 {
    min-height:20px;
}

这里你需要为类.col-xs-4设置最小高度20px，这背后的原因是jquery函数需要设置滑动元素的位置绝对，并且你用力将它设置为相对。如果div中的所有子元素都是绝对元素，那么绝对元素将不会在父div中获取它的空间，这就是为什么它会使父div获取的内容为空。所以它将它视为空div并将其高度设置为0px，并且不会在div中显示任何内容...所以我们在此指定它的最小高度来解决我们的问题。

我们可以做的另一件事是向父div添加空格 e.g。

<div class="col-xs-4" id="effects_menu">&nbsp;</div>