php - 如何将循环中的长无序列表分成两个相邻的容器

Question

我正在使用 WordPress 插入get_post_meta()列表。列表可能很长，当它达到一定数量时，它必须中断，并且列表必须在它旁边继续，例如，如果我将它设置为在 3 个项目后中断，它必须执行以下操作：

 1. List item 4. List item
 2. List item 5. List item
 3. List item 6. List item

到目前为止，这是我的代码（我将其缩短为仅 6 项，我拥有的一项是 15 项，我希望它在列出 8 项后从它旁边开始）：

<?php $amenity = get_post_meta($room->ID, "amenity", false); ?>

<ul class="list-group" style="list-style:none;">

<?php 

    foreach ( $amenity as $am ) {
        if (stripos($am, 'wifi') !== false) {
            echo '<li>' . '<i class="fas fa-wifi"></i>'. ' ' . $am . '</li>';
        } 
        elseif (stripos($am, 'fan') !== false) {
            echo '<li>' . '<i class="fab fa-pagelines"></i>'. ' ' . $am . '</li>';
        }
        elseif (stripos($am, 'coffee') !== false) {
            echo '<li>' . '<i class="fas fa-coffee"></i>'. ' ' . $am . '</li>';
        }
        elseif (stripos($am, 'fireplace') !== false) {
            echo '<li>' . '<i class="fas fa-fire"></i>'. ' ' . $am . '</li>';
        }
        elseif (stripos($am, 'umbrella') !== false) {
            echo '<li>' . '<i class="fas fa-umbrella"></i>'. ' ' . $am . '</li>';
        }
        elseif (stripos($am, 'tv') !== false) {
            echo '<li>' . '<i class="fas fa-tv"></i>'. ' ' . $am . '</li>';
        }

    }

?>


</ul>

关于如何解决这个问题的任何建议？

标签： phpwordpresslistforeach

Answer 1

您可以使用一些简单的 CSS 来代替在代码中执行此操作：

.list-group {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

https://jsfiddle.net/3tugd1h9/

https://developer.mozilla.org/en-US/docs/Web/CSS/columns