当在搜索栏中输入内容后，原本横向排列的 YouTube 视频卡片变为垂直堆叠，根本原因是 JavaScript 中错误地将匹配项的 display 值设为 "list-item"，破坏了原有 inline-block 布局流。
当在搜索栏中输入内容后，原本横向排列的 youtube 视频卡片变为垂直堆叠，根本原因是 javascript 中错误地将匹配项的 `display` 值设为 `"list-item"`，破坏了原有 `inline-block` 布局流。
要让搜索过滤后的视频列表保持与初始一致的网格式排版（多列并排、不换行），关键在于严格复用原始 CSS 中定义的显示模式。你已为 .item 元素设置了 display: inline-block，因此 JavaScript 在显示匹配项时，必须显式恢复该值，而非使用语义无关的 "list-item"（它会触发块级行为并破坏内联流）。
以下是修正后的完整搜索函数：
function search_videos() {
const input = document.getElementById('search-bar').value.toLowerCase();
const items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
const item = items[i];
const matches = item.innerHTML.toLowerCase().includes(input);
item.style.display = matches ? 'inline-block' : 'none';
}
}✅ 关键改进点：
- 使用
'inline-block'替代'list-item'，确保元素继续参与同一行内联格式化上下文； - 用
const声明变量，提升代码安全性与可读性； - 提前缓存
item引用，避免重复访问 DOM 属性； - 合并条件逻辑为一行三元表达式，更简洁清晰。
⚠️ 注意事项：
- 若后续需支持响应式断行（如小屏幕下自动换行），建议改用
display: flex或 CSS Grid 配合媒体查询，而非依赖inline-block； -
innerHTML全文匹配可能误判（例如搜 “the” 会命中所有含 “the” 的标题/ID/日期），如需精准匹配标题，应单独提取<span class="meta"></span>文本进行比对； - 首次加载时，确保所有
.item元素默认display为inline-block（可通过 CSS 重置或初始化脚本保障）。
通过以上调整，搜索过程将不再干扰视觉布局——匹配项始终以 270px 宽度、顶部对齐、左对齐的方式水平排列，完全复现初始效果。
