当容器启用垂直滚动条时，#story-container 宽度会动态收缩以容纳滚动条，导致内部的“clear”按钮向左偏移，破坏与其他按钮的视觉对齐。根本解法是将 clear 按钮移出该容器，并通过 js 动态控制其显隐。
当容器启用垂直滚动条时，#story-container 宽度会动态收缩以容纳滚动条，导致内部的“clear”按钮向左偏移，破坏与其他按钮的视觉对齐。根本解法是将 clear 按钮移出该容器，并通过 js 动态控制其显隐。
在响应式 Web 开发中，滚动条引发的布局偏移是一个常见但易被忽视的问题。根源在于：当 #story-container 设置了 overflow-y: auto 且内容高度超出设定 max-height 时，浏览器会自动添加垂直滚动条——而该滚动条会占用容器内联宽度（通常约 16–17px），导致容器实际可用宽度减小，内部所有子元素（包括 <button id="clear">）被迫左移，从而与上方独立排列的 #get 和 #getRandom 按钮失去水平对齐。
✅ 推荐解决方案：结构分离 + 状态驱动显隐
将 Clear 按钮从 #story-container 内部移出，置于同一层级（即 #content-wrapper 下），使其不再受容器滚动条宽度变化的影响；再通过 JavaScript 在显示故事内容时显示该按钮，在清空或隐藏内容时隐藏它。
HTML 结构调整（关键修改）：
<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">
<div id="generated-text"></div>
</div>
<!-- ✅ 移出容器，与 story-container 并列 -->
<button id="clear">Clear</button>
</div>CSS 同步更新（确保按钮居中且初始隐藏）：
#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: 10px auto; /* 水平居中 */
display: none; /* 初始隐藏 */
outline: none;
}JavaScript 行为增强（精准控制显隐逻辑）：
在 fetchStory() 成功加载内容后显示按钮，在 clearStoryContainer() 中隐藏按钮：
function fetchStory(storyNumber) {
clearStoryContainer(); // 先确保状态干净
const xhr = new XMLHttpRequest();
xhr.open('GET', 'fetch.php?story=' + storyNumber, true);
xhr.onload = function () {
if (xhr.status === 200) {
storyContainer.style.display = 'block';
const generatedTextElement = document.getElementById('generated-text');
if (generatedTextElement) {
generatedTextElement.innerHTML = parseAndStyleTitles(xhr.responseText);
}
currentStory = storyNumber;
// ✅ 显示 Clear 按钮
document.getElementById('clear').style.display = 'block';
} else {
displayErrorMessage('Error fetching story.');
}
};
xhr.send();
}
function clearStoryContainer() {
if (storyContainer) storyContainer.style.display = 'none';
const generatedTextElement = document.getElementById('generated-text');
if (generatedTextElement) generatedTextElement.innerHTML = '';
currentStory = null;
// ✅ 隐藏 Clear 按钮
document.getElementById('clear').style.display = 'none';
}⚠️ 注意事项：
- 不要使用 visibility: hidden 或 opacity: 0 替代 display: none，否则按钮仍占据文档流空间，影响布局；
- 若需支持键盘焦点访问（无障碍），请确保 #clear 按钮在 display: block 时可被 Tab 键聚焦（默认行为已满足）；
- 移动端小屏下，建议在媒体查询中统一调整所有按钮的 padding 和 font-size（如原 CSS 中所示），避免因按钮尺寸突变导致新的对齐偏差。
通过这一重构，Clear 按钮彻底脱离滚动容器的宽度干扰，与 Get/Random 按钮共享相同的父级布局上下文，实现真正稳定的水平居中对齐——既符合语义化 HTML 原则，又具备良好的可维护性与跨浏览器兼容性。
