CODEWITHSUNDEEP
phpcsshtml-lists
McNoodles
McNoodles

Reputation: 23

Why is the <li> not lined up

Does anyone know why the below CSS <li> is not aligning correctly? It should be 5 in each row as per the 2nd row of them.

Movie <li>

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

Code

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

Upvotes: 0

Views: 67

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

the first element of the third line doesn't float until the left edge because of the height of the first element in the second line (the title “The phantom of the Opera” fills two lines of text) which is stopping the correct alignment of that element

to prevent this unintended behaviour when using floated elements, you should set a left clearing to each 5n + 1 element of the list

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

Upvotes: 2

Related Questions