простая проблема css о переполнении: скрыто

Question

Это мой контент CSS: -

   <style type = "text/css">
       li
    {
        display:inline;
    }
    .carousel
    {
        position:absolute; 
        white-space:nowrap;

    }
    .sliderGallery
    {
        width:800px;
        overflow:hidden;
        height:100px;

    }
 </style>

Это мой HTML контент: -

 <div id="sliderGallery" class = "sliderGallery">

        <ul id = "carousel" class="carousel">
            <li>
                <img src ="Images/1.jpg" />
            </li>

            <li>
                        <img src ="Images/2.jpg" />


            </li>

            <li>
                    <img src ="Images/3.jpg" />

            </li>

            <li>
                        <img src ="Images/4.jpg" />

            </li>

            <li>
                        <img src ="Images/5.jpg" />

            </li>

            <li>
                                <img src ="Images/6.jpg" />

            </li>
        </ul>
      </div>

Как вы можете видеть, я установил overflow:hidden, но все же, мой контентотображается, если оно больше 800px.Где я не прав?

Заранее спасибо:)

Answer 1

А как насчет добавления высоты в div?

Также попробуйте удалить позицию: абсолютная; на карусели.

Answer 2

Попробуйте изменить .sliderGallery на #sliderGallery в вашем CSS

Answer 3

Danixd выше должен быть верным: установка позиции: относительная на .sliderGallery (div) заставит ul скользить внутри него.В настоящее время он перемещается относительно внешнего контейнера (или тела, если у вас его нет).Вы также можете попробовать указать явную ширину для li.