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

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

 <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), чтобы начать играть горизонтальную полосу прокрутки.

Cheers!

источник

2011-02-01 Tom Gullen

Вы должны указать div шириной – sunn0

@sunn. Разделение занимает оставшееся пространство, доступное в контейнере, это несчастливо. –

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

white-space:nowrap;

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

источник

2011-02-01 17:25:51

Удивительное спасибо! –

вы пробовали добавлять дисплей: встроенный в класс a.pageLink

источник

2011-02-01 17:21:08

Не повезло, что не получилось –

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

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

Чтобы заставить ваш список всегда на одной строке, рассмотрим white-space:nowrap

источник

2011-02-01 17:26:42 Bryan

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

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

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

источник

2011-02-01 17:27:01 zzzzBov

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

ответ

Смежные вопросы