Question

我看到了几个我正在考虑的例子，但它们并不是我正在寻找的......如果这是一个重复的帖子，请提前道歉：

所以，我有这个函数读取数组中的项目，我定期添加（目前，我在列表中有超过50个项目）。它将所有内容放在一个列表中（＆lt; ul＆gt;）。

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

但是，我想做的最终是创建一种方式将其显示在一个表格中，在屏幕上显示三行......

而不是目前正在做的事情，只列出你必须“永远”滚动的所有内容。

This是我目前输出的内容...... （是的，它有点移动友好）。

Answer 1

我会使用CSS - 特别是列计数属性。

请查看本指南，了解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;
}

您还可以添加UL元素的类，并使用它来定位CSS样式。

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

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

<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列，甚至可以为许多大小的监视器执行断点。

PHP列表中的数组项目行数为3

2 个答案: