CSS的float不工作

我努力使自己的jQuery的滑块。我需要幻灯片列表ul向左浮动。但它并不漂浮。CSS的float不工作

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

我一直在试图弄清楚这一点，一个小时，但没有任何帮助我。你能帮我解决这个问题吗？我会非常感激你。谢谢。

来源

2015-09-25 Geum

尝试给它的25％的宽度和目标'ul'：'＃内容.wrapper #slider #slides {浮动：左;宽度：25％; }' –

@MrLister我想要的是具有滑块/滑动/图像浏览器的宽度，并以左浮动每个幻灯片/图像，这样我可以动画余量x到显示每个图像。 – Geum

它的工作，为什么你认为不工作的原因是因为容器和幻灯片宽度为100％。你会得到每行一张幻灯片。如果你希望它们并排放置，你将不得不将容器溢出的x隐藏起来，并将一个子容器放在与所有幻灯片宽度一样宽的范围内。

来源

2015-09-25 17:39:13 taxicala

也可以尝试'whitespace：nowrap;'在图像上，因为可能会有换行符。 – michaeln

我想要的是将滑块/幻灯片/图像作为浏览器的宽度，并将每张幻灯片/图像向左浮动，这样我就可以为边距x绘制动画以显示每个图像。 – Geum

就像一个全屏滑块。 – Geum

CSS的float不工作

回答

相关问题