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

Question

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

链接的数量会因网站的不同部分而有所不同，我希望能够确定任何时候显示的链接数量（6加上prev +下一个按钮）。 将始终显示超过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) 。

正如我理解你的问题，这就是你如何实现自己想要的目标。 如果没有，请说明图片或更好的描述。