php - 在多列中显示列表项并限制行数

Question

我正在开发一个 php 项目，其中我从数据库中获取列表，我需要在 html 中以 3 列和 10 行显示这些数据，并在最后添加一个按钮“更多”

<?php foreach ($items as $item) { ?>
        <ul>
            <li><a href="<?php echo $item['href']; ?>" >
            <?php echo $item['name']; ?></a></li>
        </ul>
        <?php } ?>

我希望它显示为-

项目 1 项目 2 项目 3

第 4 项 第 5 项 第 6 项

.

.

.

.

最多 10 行

最后一行将是

item item "more" - 仅当列表中有更多项目时

“更多”只是一个链接，它将带我到其他页面

谢谢你的帮助。

Answer 1

添加display:inline到 li 并使用伪类来打破它

ul{
    margin:0
}
li{
    display:inline
}
li:nth-child(3n):after {
 content:"\A"; 
 white-space:pre; 
}

脚本（显示更多链接）

$('#moreli').toggle($("li").size() > 6);

这会在 6 个列表项之后启用更多链接，您可以更改脚本中的计数。

注意：减少列表项以检查效果

演示更新

Answer 2

<style>
 .row { 
     width:100%; 
     float:left;    
 }
 .item { 
     width:100px; 
     float:left;    
 }

</style>

<?php 
    //*** your array of items
    $items = array("item1", "item2", "item3", "item4","item5", "item6", "item7", "item8", "item9", "item10");

    $numItems = sizeof($items);

    //*** max number of rows
    $maxRows = 10;
    $maxItems = 3 * $maxRows;

    echo '<div class="row">';
    for ($i=0; $i<$numItems;$i++) {
        echo '<div class="item">'.$items[$i].'</div>';
        if (($i+1) % 3 == 0) {
            //*** if divisible by 3, close row
            echo '</div><div class="row">'; 
        }
        if ($i == $numItems) {
            //*** last item reached, close div
            echo '</div>';  
        }
        if ($i+1 >= $maxItems ) {
            //*** max 10 row, add more button.
            echo '</div><input type="submit" value="Add More">'; 
        return; 
        }
    }
?>

Answer 3

尝试使用这个：

<?php 
$count=0;
foreach ($items as $item) { ?>
<ul class="col3">
  <li>
  <?php if($count > 9) { ?>
    <a href="#">More</a></li></ul>
    <?php break;
  } else{ ?>
    <a href="<?php echo $item['href']; ?>" >
    <?php echo $item['name'];
    $count=$count+1;
    ?></a>
  <?php } ?>
  </li>
</ul>
<?php } ?>

并为它关注css

.col3
{
margin-left:-3%;
}

.cols3 li
{
width:30%;
margin-left:3%;
display:inline-block;
vertical-align:top;
}

.cols3 li a
{
display:block;
}