Question

我正在使用来自服务器的内容提要创建一个水平按钮列表。内容溢出时，列表会中断到另一行。

每个按钮可以具有随机长度的文本，因此在特定位置将其断开将不起作用。我要实现的是内容的最后一行比上述列表内容更长（或至少等于）

Php代码：

<ul class="tab-menu__items">
    <?php if ($related_products): ?>
        <?php foreach ($related_products as $key => $related_product): ?>
            <li class="tab-menu__item">
                <a href="#" class="tab-menu__link">
                    <?php echo $related_product['product_name']; ?>     
                </a>
            </li>
        <?php endforeach; ?>
    <?php endif; ?>
</ul>

Answer 1

我认为要显示“最后一行内容比上述列表内容更长（或至少等于）”，首先需要根据数组值的长度对数组进行排序

<ul class="tab-menu__items">
    <?php if ($related_products): ?>
        <?php array_multisort(array_map('strlen', $related_products), $related_products);?>    
        <?php foreach ($related_products as $key => $related_product): ?>
            <li class="tab-menu__item">
                <a href="#" class="tab-menu__link">
                    <?php echo $related_product['product_name']; ?>     
                </a>
            </li>
        <?php endforeach; ?>
    <?php endif; ?>
</ul>

Answer 2

为此，您可以在第二行与第一行的底部写上相同的内容，只是通过更改颜色将其隐藏

Answer 3

回答我自己的问题。

就像@poonam的答案一样，我按产品名称订购了该阵列。由于设计可以在一行中最多放置4种产品。我计算总产品数，并在每行上堆叠4个。如果总产品数不是4的倍数，则其余产品数将添加到顶部。

最终解决方案：

<?php
$total_related_products = count($related_products);
if($total_related_products > 4) {
    $first_break_point = $total_related_products%4;
}
?>

<?php foreach ($related_products as $key => $related_product): ?>
    <li class="tab-menu__item">
        <a href="#" class="tab-menu__link">
            <?php echo $related_product['product_name']; ?>
        </a>
    </li>
    <?php
    if($total_related_products > 4 && (($key+1 == $first_break_point) || (($key+1-$first_break_point)%4==0)))
    {
        echo '<br>';
    }
    ?>
<?php endforeach; ?>

<?php endif; ?>

PHP到HTML：使用动态内容管理水平列表

3 个答案: