导航列表中的项目

Question

• 我在列表中有15个项目
• 我有10个这样的名单
• 每个列表最多只能占用页面上的1行
• 溢出项目应通过“NEXT”或“PREV”按钮导航。
• 为了显示每个列表中的项目，我“浮动：左”。
• 但是溢出项目将换行到下一行。

目前，我正在为我的 笔记本电脑屏幕尺寸进行攻击：

• 我.hide（）每个列表窗口加载的所有项目
• 然后.show（）每个列表的前4项
• 我已相应配置了next和prev按钮。

我很肯定这是错的。但它使我能够看到我想要做的外观和感觉。

请建议我正确的方法。所有主要网站都处理这个。这是非常常见的问题。我现在只是无知。

Answer 1

实现这一目标的最简单方法可能是：

1. 不要使用float：left，只需使用常规的内联显示。
2. 对于容器元素，请使用overflow：hidden。
3. 将容器元素包装在外部容器中，同时使用overflow：hidden。
4. 现在，当用户单击下一个/上一个时，调整内部容器的边距并使其设置动画，以便它滑过以显示其他元素。

Answer 2

我认为我通过另一个SO响应解决了这个问题：

How to move first child to the end?

感谢您的帮助