"void space" in a <li> with images - php

Question

I'm kind of stuck on this. I have to put an horizontal list of different states of some services I'm working on. I have 3 different states ( Green, Orange, Red ), and I want to "go back to the line" whenever the state changes. I have the feeling I need to write something like "you go xx pixels down" to correctly have my lists in order, but it still keeps packing weirdly. I don't really know if I'm clear.
Here's part of the code :
$brequest = 1;
echo "<ul>\n";
foreach($arrstate as $sun){
for($x=1 ; $x<4 ; $x++){
if($sun[1] == $x){
if($brequest != $x){
$brequest = $x;
echo "</ul><ul>\n"; //Note that it's just a try here
}
$affichage=" <img src=\"images/" . $images[$x] . ".svg\" title=\"" . $texte_alt[$x] . "\" alt=\"" . $texte_alt[$x] . "\" height=\"40px\" style=\"vertical-align:middle\"";
$comment="<br /><br />".$sun[2]."<br /><br/>Last Updated : ".$sun[3]."<br /><br />By ".$sun[4]."</li>\n";
echo "<li style=\"background-color: " . $couleur_etat[$x] . "\">" . $sun[0] . $affichage. $comment;
}
}
}
echo "</ul>";
The array is sorted by states, and the <style> part is :
<style>
ul { list-style-type: none;}
li {
display: inline;
margin: 1em;
float: left;
padding: 1em;
border: 1px solid black;
border-radius: 15px;
width: 15em;
min-height: 3em;
font-weight: bold;
}
</style>
Feel free to ask me anything about the code. Thank you in advance for your answer !

Answer 1

Answering my own question to help.
I just had to clear:left every <ul> I use, this way the float will stop putting images at the same row. It goes like this :
echo "</ul><ul style=\"clear:left\">";
I know CSS in line is not that much appreciated, but I began HTML PHP & CSS Yesterday. So, let's run with it for the moment !
( And sorry for the bad example, I'll give more attention to details next time. Thank you ! )