css浮动不起作用

Question

我正在尝试创建自己的jquery滑块。我需要向左浮动的幻灯片列表。但它不浮动。

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作为隐藏，并将子容器放在与所有滑块宽度一样宽的内部。