如何像“水平滚动导航栏”一样实现分页？

Question

我正在尝试创建一个底部对齐的导航栏，其中包含用于在链接列表中移动的“上一个”和“下一个”按钮，类似于您在长论坛帖子底部看到的内容。

链接的数量会因网站的不同部分而异，我希望能够修复任何时候显示的链接数量（6 个加上上一个 + 下一个按钮）。显示的链接总是超过 6 个（最少 15 个）。

这就是我想要实现的目标：

没有太多的 HTML，我也没有任何其他代码（除了一些不相关的美学样式）。我很乐意使用 CSS 和 JavaScript 的任意组合来实现这一点。

我的 HTML 如下：

<div class="bottom_nav page_width">
        <ul>
            <li><a href="#"><i class="icon-chevron-left icon-large"></i></a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li><a href="#">11</a></li>
            <li><a href="#">12</a></li>
            <li><a href="#">13</a></li>
            <li><a href="#">14</a></li>
            <li><a href="#">15</a></li>
            <li><a href="#">16</a></li>
            <li><a href="#"><i class="icon-chevron-right icon-large"></i></a></li>
        </ul>
    </div>

Answer 1

首先，您可以使用 CSS 属性 white-space:nowrap; 将所有链接对齐在一行中。

这将启用水平滚动条，您可以使用 overflow: hidden; 隐藏它

现在您可以使用可以滚动div 或ul 内容的JavaScript 函数。可能是scrollBy(x, y)。

正如我理解您的问题一样，这就是您实现目标的方法。如果不是，请用图片或更好的描述来解释。