html - アイテムが限定数に達したときにウルリを横に伸ばす方法はありますか

Question

とにかく、3つのアイテムに達したときにリストを横に大きくすることはありますか? リストの数がわかっているときにそれを行う方法を知っています。しかし、ループで生成された場合、どうすればよいのでしょうか?

Item1    Item4    Item7
Item2    Item5    Item8
Item3    Item6

Answer 1

<style>
ul.list{
padding:0;
margin:0;
width:100px;
}
ul.list li{
display:block;
background-color:#CCC;
padding:5px;
}
</style>

<?php
    for($ctr=1;$ctr<=10;$ctr++){
    $mod = $ctr%3;
    //echo $mod.'<br />';
    echo '<ul class="list">';
        echo '<li>Item '.$ctr.'</li>';
    echo '</ul>';
    if($mod==0){ echo '<br />'; }
   }
?>  

変更するだけ

Answer 2

ループで生成される場合は、アイテムを追加するたびにインクリメントされるカウンターを作成します。:)

次に、ループの後にこれを使用して、必要なことを実行します。

if(counter%3==0)
   {
   counter = 0;
   //do cool stuff
   }