Отображение горизонтальной полосы прокрутки и принудительное горизонтальное переполнение в элементах LI

У меня есть CSS и HTML, которые выглядят следующим образом. Существует код javascript, который превращает .tab в элемент с вкладками #tab-container. Поскольку #tab-container имеет фиксированную ширину и высоту, если содержимое .tab превышает ширину/высоту, оно становится скрытым или переполняется. В случае UL я хочу, чтобы он переполнялся и имел полосы прокрутки внутри div.tab. Должна появиться только горизонтальная полоса прокрутки. Я пробовал с кодом ниже, но по какой-то причине мне удается прокручивать только по вертикали (LI заполняет ограничение ширины, затем появляется больше строк... Мне нужна только одна строка + горизонтальная прокрутка). Я думаю, что не могу изменить два DIV, иначе вкладки будут сломаны. Мне нужно решение в слое .tab.

HTML:

<div id="tab-container">
    <div class="tab">
       <ul>
           <li><img src="img01.png" width="96" height="96" /></li>
           <li><img src="img02.png" width="96" height="96" /></li>
           <li><img src="img03.png" width="96" height="96" /></li>
           <li><img src="img04.png" width="96" height="96" /></li>
       </ul>
</div>

CSS:

#tab-container { width: 500px; height: 200px; position: relative; overflow: hidden; } 
.tab { position: relative; overflow: hidden;}
#tab-container .tab ul { position: absolute; width: auto; display: block; overflow: scroll; }
#tab-container .tab ul li { display: inline-block; position: relative; }

html css overflow positioning scrollbars
person unfulvio    schedule 12.01.2012    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Изменять

.tab {
  overflow: hidden;
}

to

.tab {
  overflow-x: scroll; /* or auto, if you don't want the scroll bar visible all of the time. */
  overflow-y: hidden;
}

Если вы обнаружите, что ваши материалы все еще обтекаются, вам может понадобиться добавить white-space: nowrap в ваши div.tabs или ‹li›s.

Кроме того, position: absolute вашего ul, вероятно, будет мешать тому, что вы хотите. position: absolute убирает элемент из потока документов, поэтому он может вести себя не так, как вы хотите. Если вы обнаружите, что он ведет себя неправильно, попробуйте изменить его на position: relative.

person Shauna    schedule 12.01.2012