Как сделать так, чтобы переполненные и плавающие элементы оставались на одной строке?

Question

<div id='wrapper'>
   <ul>
      <li><img src='1.jpg' /></li>
      <li><img src='2.jpg' /></li>
      <li><img src='3.jpg' /></li>
      <li><img src='4.jpg' /></li>
      <li><img src='5.jpg' /></li>
   </ul>
</div>

#wrapper {
   width: 300px;
   height: 55px;
   overflow: auto;
}
li {
   float: left;
}

выше - суть моих html и css, и в настоящее время автопрокрутка создает только вертикальную полосу прокрутки.Я хотел бы сделать так, чтобы он создавал горизонтальную полосу прокрутки, как бы я это сделал?

Answer 1

Вы должны добавить ширину всех изображений к вашему ul. Также смотрите мой jsfddle .

#wrapper ul {
   width: 2000px; /* if the sum of all images widthes is 2000px */
}

Answer 2

Нашел один из предыдущих постов по этому же вопросу.

"Вы не должны получать как горизонтальную, так и вертикальную полосы прокрутки, если не сделаете контент достаточно большим, чтобы требовать их.

Однако вы обычно делаете это в IE из-за ошибки. Проверьте в других браузерах (Firefox и т. Д.), Чтобы выяснить, действительно ли это делает только IE.

IE6-7 (среди других браузеров) поддерживает предлагаемое расширение CSS3 для независимой установки полос прокрутки, которое можно использовать для подавлениявертикальная полоса прокрутки:

переполнение: авто; переполнение-y: скрыто; вам также может понадобиться добавить для IE8:

-ms-overflow-y: скрыто; поскольку Microsoft угрожает переместить всепредварительно стандартные свойства CR в их собственное поле '-ms' в режиме стандартов IE8 (это имело бы смысл, если бы они всегда делали это таким образом, но сейчас это неудобство для всех).

С другой стороны, вполне возможно, что IE8 исправит ошибку в любом случае. "

Элемент div div CSS - как отображать только горизонтальные полосы прокрутки?

Answer 3

Добавить:

#wrapper ul {
   height: 55px;
}

Что вы делаете неправильно, так это то, что нет элементов, которые создают горизонтальную полосу прокрутки. Таким образом, вы должны создать один. Элемент UL идеально подходит для этого.