html - 当达到有限数量的项目时，有没有办法让 ul li 横向增长

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
   }