项目磁贴布局导致topnav尺寸变动问题求助

第一步：统一全局基础样式 #

先消除浏览器默认样式差异，同时避免横向溢出影响页面宽度：

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

这一步能确保所有页面的基础布局起点一致，不会因默认margin/padding导致宽度偏差。

第二步：修复项目磁贴布局的溢出问题 #

如果用浮动布局： #

必须清除浮动，避免父容器高度塌陷间接影响页面宽度：

.project-tiles-container::after {
  content: "";
  display: table;
  clear: both;
}

如果用Flex布局： #

用gap替代margin控制间距，同时限制容器最大宽度：

.project-tiles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  max-width: 100vw;
}

.project-tile {
  flex: 1 1 300px; /* 磁贴自适应宽度，最小300px */
}

如果用Grid布局： #

确保网格不会超出视口：

.project-tiles-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1rem;
  width: 100%;
}

核心是让磁贴容器和子元素始终在视口范围内，不会触发横向滚动条挤压页面宽度。

第三步：固定导航栏宽度 #

让topnav宽度不受页面内容影响：

.topnav {
  width: 100%;
  left: 0;
  /* 如果是固定导航，加上position: fixed; top: 0; */
}

第四步：排查溢出元素 #

打开浏览器开发者工具（F12），给body临时加边框：body { border: 2px solid red; }，检查哪个元素超出边框范围，找到后调整其宽度或给父容器加overflow-x: hidden限制。

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