css float не работает

Question

Я пытаюсь создать собственный слайдер jquery. И мне нужен список слайдов ul, чтобы плавать влево. Но он не плавает.

HTML:

<div id="slider"> 
    <ul id="slides"> 
    <li class="slide"><img src="http://placehold.it/900x400"></li> 
    <li class="slide"><img src="http://placehold.it/900x400"></li> 
    <li class="slide"><img src="http://placehold.it/900x400"></li> 
    <span class="clear_both"></span> 
    </ul> 
</div> 

CSS:

#content .wrapper #slider #slides .slide { 
    float: left; 
    width: 100%; 
} 

Демо на codepen.io

Я пытался выяснить это в течение часа, но ничего не помогло. Не могли бы вы помочь мне в этом. Я буду очень благодарен вам. Спасибо.

Answer 1

Это работает, причина, по которой вы думаете, что не работает, потому что ширина контейнера и слайдов составляет 100%. Вы получите один слайд в строке. Если вы хотите, чтобы все они были бок о бок, вам нужно будет сделать контейнер переполнения x скрытым и поместить дочерний контейнер внутри так же широко, как и все слайды.