提交表单后PHP单词搜索页面样式失效问题求助

我为寄养儿童制作了一款用于开启敏感话题讨论的单词搜索游戏。现有一个HTML表单，可向process.php提交单词列表：直接访问process.php使用默认单词时，页面样式正常；但通过HTML表单提交单词后，单词网格功能正常，但样式完全失效。以下是相关代码，恳请帮忙排查问题所在：

HTML表单代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Word Form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        .ui-content {
            max-width: 500px;
            margin: 0 auto;
        }
        .ui-field-contain label {
            font-weight: bold;
        }
        .ui-btn.ui-submit {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>Word Form</h1>
        </div>
        <div data-role="content" class="ui-content">
            <form id="wordForm" method="post" action="process.php">
                <div data-role="fieldcontain">
                    <label for="word1">First Word</labe2>
                    <input type="text" name="word1" id="word1">
                </div>
                <div data-role="fieldcontain">
                    <label for="word2">Word 2:</labe3>
                    <input type="text" name="word2" id="word2">
                </div>
                <div data-role="fieldcontain">
                    <label for="word3">Word 3:</labe3>
                    <input type="text" name="word3" id="word3">
                </div>
                <div data-role="fieldcontain">
                    <label for="word4">Word 4:</labe4>
                    <input type="text" name="word4" id="word4">
                </div>
                <div data-role="fieldcontain">
                    <label for="word5">Word 5:</label>
                    <input type="text" name="word5" id="word5">
                </div>
                <div data-role="fieldcontain">
                    <label for="word6">Word 6:</label>
                    <input type="text" name="word6" id="word6">
                </div>
                <div data-role="fieldcontain">
                    <label for="word7">Word 7:</label>
                    <input type="text" name="word7" id="word7">
                <button type="submit" class="ui-btn ui-submit">Create a WordSearch</button>
            </form>
        </div>
    </div>
</body>
</html>

PHP文件代码（process.php） #

<?php

function createWordSearch($size, $numWords, $words) {
    $grid = array_fill(0, $size, array_fill(0, $size, ' '));

    function canPlaceWord($word, $row, $col, $direction, $grid) {
        if ($direction === 'horizontal') {
            for ($i = 0; $i < strlen($word); $i++) {
                $char = $word[$i];
                if ($grid[$row][$col + $i] !== ' ' && $grid[$row][$col + $i] !== $char) {
                    return false;
                }
            }
        } else {
            for ($i = 0; $i < strlen($word); $i++) {
                $char = $word[$i];
                if ($grid[$row + $i][$col] !== ' ' && $grid[$row + $i][$col] !== $char) {
                    return false;
                }
            }
        }
        return true;
    }

    for ($i = 0; $i < $numWords; $i++) {
        $word = strtoupper($words[array_rand($words)]);
        $placed = false;
        $shuffleAttempts = 0;
        while (!$placed && $shuffleAttempts < 100) {
            $direction = ['horizontal', 'vertical'][rand(0, 1)];
            if ($direction === 'horizontal') {
                $row = rand(0, $size - 1);
                $col = rand(0, $size - strlen($word));
            } else {
                $row = rand(0, $size - strlen($word));
                $col = rand(0, $size - 1);
            }

            if (canPlaceWord($word, $row, $col, $direction, $grid)) {
                for ($j = 0; $j < strlen($word); $j++) {
                    if ($direction === 'horizontal') {
                        $grid[$row][$col + $j] = $word[$j];
                    } else {
                        $grid[$row + $j][$col] = $word[$j];
                    }
                }
                $placed = true;
            }
            $shuffleAttempts++;
        }
    }

    for ($row = 0; $row < $size; $row++) {
        for ($col = 0; $col < $size; $col++) {
            if ($grid[$row][$col] === ' ') {
                $grid[$row][$col] = chr(rand(65, 90)); // Fill with random uppercase letter
            }
        }
    }

    return $grid;
}

$size = 25;
$numWords = 20;


if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['word1']) && isset($_POST['word2']) && isset($_POST['word3']) && isset($_POST['word4']) && isset($_POST['word5']) && isset($_POST['word6']) && isset($_POST['word7'])) {
    $words = [
        $_POST['word1'],
        $_POST['word2'],
        $_POST['word3'],
        $_POST['word4'],
        $_POST['word5'],
        $_POST['word6'],
        $_POST['word7']
    ];
    
} else {
    // Default words if not provided through the form
    $words = ['APPLE', 'BANANA', 'CHERRY', 'GRAPE', 'ORANGE', 'KIWI', 'MANGO', 'PEAR', 'PINEAPPLE', 'WATERMELON', 'STRAWBERRY', 'BLUEBERRY', 'RASPBERRY', 'BLACKBERRY', 'LEMON', 'LIME', 'COCONUT', 'PEACH', 'PLUM', 'APRICOT'];
}

$wordSearch = createWordSearch($size, $numWords, $words);

?>

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }
        
        .container {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            width: 80%;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
            background-color: white;
            padding: 20px;
        }
        
        .word-search {
            border-collapse: collapse;
            margin-right: 20px;
        }
        
        .word-search td {
            border: 1px solid #ddd;
            width: 20px;
            height: 20px;
            text-align: center;
            font-size: 16px;
        }
        
        .word-list {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        .word-list li {
            margin-bottom: 5px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="container">
        <table class="word-search">
            <?php foreach ($wordSearch as $row): ?>
                <tr>
                    <?php foreach ($row as $cell): ?>
                        <td><?= $cell ?></td>
                    <?php endforeach; ?>
                </tr>
            <?php endforeach; ?>
        </table>

        <div class="word-list">
            <h2>Word List:</h2>
            <ul>
                <?php foreach ($words as $word): ?>
                    <li><?= $word ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
    </div>
</body>
</html>

我已尝试多种方法仍未解决，希望得到技术支持。

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