PHP在表格中按3行列出数组项

Question

我看到了几个和我想的有点相似的例子，但它们并不完全是我要找的...提前道歉，如果这是一个重复的帖子：

所以，我有这个函数，它读取数组中的项目，我经常添加（目前列表中有50多个项目）。 它将所有内容都放在一个列表中（<ul>）。

function getListItems()
{
$listItems = array(
    1 => "List Item 1",
    2 => "List Item 2",
    3 => "List Item 3",
    4 => "List Item 4",
    5 => "List Item 5",
    6 => "List Item 6",
    7 => "List Item 7",
    8 => "List Item 8",
    9 => "List Item 9",
    10 => "List Item 10",
    11 => "List Item 11",
    12 => "List Item 12",
    13 => "List Item 13",
    14 => "List Item 14",
    15 => "List Item 15",
);

$fullList = "<ul>";
foreach($listItems as $itemId=>$itemName)
{
    $fullList .= "<li><a href='somePage.php?id=" .$itemId. "'>" .$itemName. "</a></li>";
}
$fullList .= "</ul>";
return $fullList;
}

但是，我的最终目标是创建一种方法，在屏幕上以三行的形式将其展示在表格中...

而不是当前的情况，只是列出所有东西，你必须在屏幕上不停地滚动。

这里 是我当前的输出...(是的，它在移动设备上也比较友好)。

- Mark Bogner

Answer 1

我会使用 CSS - 具体来说是 column-count 属性。

查看这个指南，了解 CSS 列如何工作：https://css-tricks.com/guide-responsive-friendly-css-columns/

注意：这不是 PHP。

这里有一个示例展示了如何将类似于你的代码输出的内容与列属性相结合：

http://jsfiddle.net/j86fu084/

ul{
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

你还可以给无序列表元素添加一个类，并使用该类来定位CSS样式。

- Chris

---

好的，那么，根据我上面的代码，如何在数组中使用它？ - Mark Bogner

优雅的解决方案，Chris。我喜欢它！@MarkBogner，您不会以任何方式更改数组。您将Chris的代码添加到样式表中，它将为您处理ul样式。 - Walker Boh

Answer 2

为了做出类似的东西而不使用表格（这将使其具有响应性），您可以这样做：

PHP

function getListItems()
{
    $listItems = array(
        1 => "List Item 1",
        2 => "List Item 2",
        3 => "List Item 3",
        4 => "List Item 4",
        5 => "List Item 5",
        6 => "List Item 6",
        7 => "List Item 7",
        8 => "List Item 8",
        9 => "List Item 9",
        10 => "List Item 10",
        11 => "List Item 11",
        12 => "List Item 12",
        13 => "List Item 13",
        14 => "List Item 14",
        15 => "List Item 15",
    );

    $fullList = "<div id='myList'>";
    foreach($listItems as $itemId => $itemName)
    {
        $fullList .= "<span><a href='somePage.php?id={$itemId}'>{$itemName}</a></span>";
    }
    $fullList .= "</div>";
    return $fullList;
}

CSS（层叠样式表）

#myList, #mylist>* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

#myList {
    display: block;
    width: 100%;
}

#myList>span {
    display: inline-block;
    width: 33%;
}

/* mobile stylesheet */
@media(max-width: 600px) {
    #mylist>span {
        width: 100%;
    }
}

提示：强制移动设备使用320像素的屏幕宽度，并禁用缩放（可选）

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />

您可以将样式设置为表格的外观，列宽度将全部相同。使用box-sizing属性可以使边距和边框在计算元素宽度时不被考虑。由于没有行，因此列宽度不仅是流体的，而且可以缩小到小屏幕的1列，甚至可以针对许多尺寸的监视器进行断点处理。

- MaKR