“清除”按钮似乎没有与其他两个按钮对齐。

document.addEventListener('DOMContentLoaded', function () {
    var totalStories = 3;
    var currentStory = null;
    var storyContainer = document.getElementById('story-container');
    var contentWrapper = document.getElementById('content-wrapper');

    function clearStoryContainer() {
        if (storyContainer) {
            storyContainer.style.display = 'none';
            var generatedTextElement = document.getElementById('generated-text');
            if (generatedTextElement) {
                generatedTextElement.innerHTML = '';
            }
            if (contentWrapper) {
                contentWrapper.style.marginTop = '0px';
            }
            currentStory = null;
        }
    }

    function fetchStory(storyNumber) {
        clearStoryContainer();
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'fetch.php?story=' + storyNumber, true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                if (storyContainer) {
                    storyContainer.style.display = 'block';
                    var generatedText = xhr.responseText;
                    var generatedTextElement = document.getElementById('generated-text');
                    if (generatedTextElement) {
                        generatedTextElement.innerHTML = parseAndStyleTitles(generatedText);
                    } else {
                        console.log('Generated text element not found.');
                    }
                    if (contentWrapper) {
                        contentWrapper.style.marginTop = '0';
                    }
                    currentStory = storyNumber;
                } else {
                    console.log('Story container element not found.');
                }
            } else {
                console.log('Error fetching story. Status code: ' + xhr.status);
                clearStoryContainer();
                displayErrorMessage('Error fetching story.');
            }
        };
        xhr.onerror = function () {
            console.log('Network error while fetching story.');
            clearStoryContainer();
            displayErrorMessage('Network error while fetching story.');
        };
        xhr.send();
    }

    function displayErrorMessage(errorMessage) {
        if (storyContainer) {
            storyContainer.style.display = 'block';
        }
        var generatedTextElement = document.getElementById('generated-text');
        if (generatedTextElement) {
            generatedTextElement.innerHTML = errorMessage;
        }
        if (contentWrapper) {
            contentWrapper.style.marginTop = '60px';
        }
        currentStory = null;
    }

    function parseAndStyleTitles(text) {
        return text.replace(/\[\[(.*?)\]\]/g, function (match, title) {
            return '<span>' + title + '</span>';
        });
    }

    document.getElementById('get').addEventListener('click', function () {
        var storyNumber = parseInt(document.getElementById('story-number').value);

        if (!isNaN(storyNumber) && storyNumber >= 1 && storyNumber <= totalStories) {
            fetchStory(storyNumber);
            document.getElementById('story-number').value = ''; // Clear the input text
        } else {
            displayErrorMessage('Please enter a valid number between 1 and ' + totalStories + '.');
        }
    });

    document.getElementById('getRandom').addEventListener('click', function () {
        var randomStoryNumber = Math.floor(Math.random() * totalStories) + 1;
        fetchStory(randomStoryNumber);
        document.getElementById('story-number').value = ''; // Clear the input text
    });

    document.getElementById('clear').addEventListener('click', function () {
        clearStoryContainer();
    });
});

body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #ff6600;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        h1 {
            font-size: 28px;
            margin: 0;
        }

        main {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        #content-wrapper {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 100%;
            max-width: 1000px; /* Adjust this value to fit your screen */
            text-align: center;
            margin: 0 auto;
            overflow-x: hidden;
            max-height: 100%;
        }

        #story-number {
            padding: 10px 16px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 200px;
            height: 30px;
            margin-bottom: 10px;
        }

        #get-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #get,
        #getRandom,
        #clear {
            background-color: #ff6600;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s ease;
            margin-bottom: 10px;
            outline: none;
        }

        #story-container {
            background-color: #fff;
            text-align: center;
            display: none;
            max-height: 300px; /* Set the maximum height here */
            overflow-y: auto; /* Add this line for the vertical scrollbar */
            padding: 0 20px; /* Add padding to the left and right */
        }

        #generated-text {
            font-size: 18px;
            line-height: 1.5;
            margin-bottom: 10px;
            color: #333;
            text-align: center;
        }

        #generated-text span {
            font-weight: bold;
            color: #000;
            font-size: 20px;
        }

        #clear {
            display: block;
            margin: 10px auto;
        }

        @media (min-width: 601px) {
            #content-wrapper {
                max-width: 600px;
            }
        }

        @media (max-width: 600px) {
          #content-wrapper {
            max-width: 90%; /* Adjust width as needed */
            max-height: 80vh; /* Adjust height as needed */
            overflow-y: auto; /* Add vertical scrollbar */
          }

          #story-container {
                 max-height: 58vh; /* Adjust the value as needed for your device */
             }
          
          #get,
          #getRandom,
          #clear {
            font-size: 10px !important;
            padding: 20px 20px !important;
          }
        }

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Story Fetcher</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
      <h1>Stories</h1>
    </header>
    <main>
      <div id="content-wrapper">
        <div id="get-container">
          <input type="text" id="story-number" placeholder="Enter story number">
          <button id="get" type="button">Get Story</button>
          <button id="getRandom" type="button">Random Story</button>
        </div>
        <div id="story-container">
          <!-- Story content will be displayed here -->
          <div id="generated-text"></div>
          <button id="clear">Clear</button>
        </div>
      </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

当运行代码片段时，一切看起来都很好，但在我的浏览器（测试过Google Chrome，Brave和微软Edge）中，它看起来像这样：https://imageupload.io/4quysz6z76jhBAt
我已经尽了最大的努力来找出问题所在，但没有任何结果。所以我不知道错误在哪里。