Question

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

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

我希望它显示为 -

item1 item2 item3

item4 item5 item6

最多10行

最后一行将是

项目＆＃34;更多＆＃34; - 仅当列表中有更多项目时

＆＃34;更＆＃34;只是一个链接，将带我到其他页面

感谢您的帮助。

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个列表项之后启用更多链接，您可以更改脚本中的计数。

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

<强> DEMO UPDATED

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;
}

显示多列中的列表项并限制行数

3 个答案: