为什么<li>没有排队</li>

Question

有谁知道为什么下面的CSS <li>没有正确对齐？根据它们的第2行，它应该是每行5个。

Movie <li> http://i57.tinypic.com/9gd2l5.png

CSS

#movies {
margin:0 auto;
width:690px;
}
#movies ul {
background-color:#222;
border-radius:10px;
text-align: center;
display:inline-block;
margin:0 auto;
padding-left:10px;
padding-top:10px;
}
#movies ul li {
float:left;
width:115px;
padding: 5px 5px 20px 5px;
list-style-type: none;
}
#movies ul li a{
text-decoration:none;
display:block;
padding:10px;
color:#FFF;
}
#movies ul li a:hover{
background-color:#111;
}

代码

<div id="movies">
<ul>
<?php 
foreach($movieTitle as $movie)
{
echo '<li>';
echo '<img src="' . $movie->image . '" />';
echo '<div class="cFFF">' . $movie->movie_name . '</div>';
echo '<div class="s11 c999">Rating: ' . round($movie->rating) . '</div>';
echo '</li>';
}
?>
</ul>
</div>

</ul>

Answer 1

由于第二行中第一个元素的高度（标题为“歌剧的幽灵”填充两行文本），第三行的第一个元素不会浮动到左边缘，这是停止该元素的正确对齐

为了防止在使用浮动元素时出现这种意外行为，您应该为列表中的每个5n + 1元素设置左侧清除

#movies ul li:nth-child(5n + 1) {
   clear: left;
}