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

Question

I'm trying to create a bottom aligned navigation bar that contains "prev" and "next" buttons for moving through a list of links, something similar to what you might see at the bottom of a long forum thread.

The number of links will vary through different sections of the site and I'd like to be able to fix the number of links (6 plus prev + next buttons) displayed at any one time. There would always be more than 6 links to display (minimum 15).

This is what I want to achieve:

There's not much HTML and I don't have any other code (apart from some aesthetic stylings which aren't really relevant). I'm happy to use any combination of CSS and JavaScript that could make this work.

My HTML is as follows:

<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

Firstly you can use CSS property white-space:nowrap; to align all the links in one single line.

That will enable the horizontal scrollbar which you can hide by using overflow: hidden;

Now you can use a JavaScript function that can scroll the content of the div or ul . It may be scrollBy(x, y) .

This is how you can achieve what you want to, as I understood your question. If not, please explain with images or a better description.