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

Question

У меня есть несколько 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; }

Answer 1

Изменение

.tab {
  overflow: hidden;
}

до

.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 или

s.

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