PHP в HTML: управление горизонтальным списком с динамическим контентом

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

, чтобы сделать это, вы можете написать во второй строке то же самое дно, что и в первой строке, просто скрывая его, меняя цвет

Answer 2

Отвечая на мой вопрос.

Как и ответ @ 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; ?>

Answer 3

Я думаю, что для отображения «последней строки содержимого, которая должна быть длиннее (или, по крайней мере, равна) вышеупомянутому содержимому списка») сначала необходимо отсортировать массив по длине значения массива

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