CSS горизонтальная прокрутка (простая)

Question

Дано:

        <div class="pageNavWrap">
            <a class="pageLink" href="#">1</a>
            <a class="pageLink" href="#">2</a>
            <a class="pageLink" href="#">3</a>
            <a class="pageLink" href="#">4</a>
            <a class="pageLink" href="#">5</a>
            <a class="pageLink" href="#">6</a>
            <a class="pageLink" href="#">7</a>
            <a class="pageLink" href="#">8</a>
            <a class="pageLink" href="#">9</a>
            <a class="pageLink" href="#">10</a>
            <a class="pageLink" href="#">11</a>
            <a class="pageLink" href="#">12</a>
            <a class="pageLink" href="#">13</a>
        </div>

С:

.pageNavWrap{
    background-color:#666;
    text-align:center;
    font-size:16px;
    overflow-x:scroll;
}
a.pageLink{
    color:White;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
}

Как я могу остановить переполнение ссылок вниз? Я бы хотел, чтобы они только переполняли-x (уже указано в CSS), чтобы в игру вступила горизонтальная полоса прокрутки.

ура!

Answer 1

нужно добавить

white-space:nowrap;

Кажется, что не все браузеры согласны с наследованием этого атрибута, поэтому попробуйте добавить его в оба правила css.

Answer 2

Если вы не придирчивы к совместимости браузера:

.pageNavWrap
{
  display: table-row;
}
.pageLink
{
  display: table-cell;
}

, и я собирался предложить также white-space: nowrap;, но @Noel Walters побил меня этим.

Answer 3

Overflow-x может быть не лучшим вариантом, так как мы все еще ждем, чтобы все браузеры приняли все функции CSS3.

С точки зрения пользовательского опыта, вам действительно нужны 13 (или более) результатов разбивки на страницы? Если вы решите «да», то я бы рассмотрел вопрос о том, чтобы превратить ваши результаты в нумерацию страниц в список, и оставил в левом верхнем углу с объявлением css:

Чтобы ваш список всегда отображался в одной строке, рассмотрим пробел: nowrap

Answer 4

вы пытались добавить display: inline в класс a.pageLink