为什么<li>没有排队

Question

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

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;
}

为什么<li>没有排队

Why is the <li> not lined up

css

php

html-lists

CSS

代码