使用PHP foreach动态生成HTML时CSS样式错乱如何修复

问题根源 #

你当前的代码大概率是把卡片容器（<div class="card">）和列表容器（<ul>）放在了PHP循环外面，只循环了<li>标签，导致所有列表项都被塞进同一个<ul>里，最终所有内容集中在单个卡片中，破坏了原本的多卡片布局。

解决方案 #

要恢复正确布局，需要按卡片维度循环：外层循环每个卡片，生成完整的卡片结构（包括<div class="card">、标题、<ul>），内层循环当前卡片的所有列表项生成<li>。

1. 确保数据结构是分组形式 #

首先你的$package_types需要是按卡片分组的二维数组，每个元素对应一个卡片，包含卡片标题和该卡片下的列表项，示例结构如下：

$package_types = [
    [
        'title' => '基础套餐',
        'items' => ['1GB流量', '100分钟通话', '免费短信']
    ],
    [
        'title' => '进阶套餐',
        'items' => ['5GB流量', '300分钟通话', '国际漫游']
    ],
    [
        'title' => '尊享套餐',
        'items' => ['不限流量', '1000分钟通话', '专属客服']
    ]
];

2. 调整PHP循环层级 #

使用嵌套循环生成布局，外层循环卡片，内层循环列表项：

<?php foreach ($package_types as $card) : ?>
    <div class="card">
        <h3><?php echo htmlspecialchars($card['title']); ?></h3>
        <ul>
            <?php foreach ($card['items'] as $item) : ?>
                <li><?php echo htmlspecialchars($item); ?></li>
            <?php endforeach; ?>
        </ul>
    </div>
<?php endforeach; ?>

3. 数据库数据分组处理（如果需要） #

如果你的数据库查询结果是扁平的单条记录（比如每条记录对应一个列表项，同时包含所属卡片的标识），需要先对数据进行分组：

// 假设数据库查询结果为$db_rows，每条记录包含card_title（卡片标题）和item_content（列表项内容）
$package_types = [];
foreach ($db_rows as $row) {
    $cardTitle = $row['card_title'];
    // 初始化卡片分组
    if (!isset($package_types[$cardTitle])) {
        $package_types[$cardTitle] = [
            'title' => $cardTitle,
            'items' => []
        ];
    }
    // 将列表项加入对应卡片
    $package_types[$cardTitle]['items'][] = $row['item_content'];
}
// 转换为索引数组（可选，不影响循环）
$package_types = array_values($package_types);

这样处理后，动态生成的结构就和你手动写的固定结构完全一致，布局自然恢复正常。

内容的提问来源于stack exchange，提问作者kennedyas