将列表转换为列

我的问题是 css 正在断开列表项以成为下一列的一部分这看起来很丑。

如何解决此问题

这是 CSS 和循环

.cbt{clear:both;}
container-main{ width:960px;}
ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}
li{border:solid 1px #555;}

.item-vol{ height:250px;}

<div id="container-main" style="background-color:#F6F6F6;">

  <?php
echo '<div><br>winkelwagen_id is: <span style="color:red;"><b>'.$winkelwagen_id.'</b></span></div><br>';
//select all the items into the database and show them to screen
$q = "SELECT item_id, naam, prijs, img FROM shbel_items";
$q2 = "SELECT item_id,aantal FROM shbel_winkelwagen_items where winkelwagen_id = $winkelwagen_id";
//extracting every single item
$records = $crud->rawSelect($q);
        $items = $records->fetchAll(PDO::FETCH_ASSOC);

echo"<UL>";
for($i=0, $cnt = 5; $i<$cnt; $i++){

foreach($items as $item)
    {
        if( $winkelwagen->productBestaat($item['item_id'] )){
            //voeg verwijder/toevoegen knop toe aan html afhankelijk van een match
        }
    ?>
     <LI>    
    <div class="item-vol"><form action="/" method="post" id="">
    <div><img height="100" width="100" src="<?php echo("/images/".$item['img']); ?>" /></div>
    <div>Item naam: <?php echo($item["naam"]); ?></div>
    <div>Omschrijving <?php echo($item["omschrijving"]); ?></div>
    <div><input type="checkbox" name="toevoegen[]" value="<?php echo($item['item_id']); ?>"/>
    <span><input name="aantal" type="text" size="10" value=""></span></div>
    <div><input id="" type="submit" value="toevoegen" name="action"/></div> 
            <input name="item_id" type="hidden" value="hidden">
    </form>
    </div>
    </LI>
    <?php
    }
}// EINDE FOR LOOP
?>
  </ul>
  </div><!--    EINDE CONTAINER-MAIN-->

谢谢，理查德