初学CSS开发网页 移动端/调整浏览器大小时右侧出现空白条求解决

问题修复方案 #

核心原因 #

页面右侧出现空白是小屏幕下多个元素宽度超出视口导致的溢出，主要诱因有三个：

• 没有全局设置box-sizing: border-box，元素内边距会撑宽容器，导致宽度超出100%视口
• 多个flex布局容器未设置折行规则，小屏幕下内容无法放下时强行横向排列撑宽页面
• 图片未做响应式限制，固定尺寸的图片在小屏设备上会撑爆容器

具体修复步骤 #

1. 增加全局样式重置，放在CSS代码最开头：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
}

2. 给所有flex容器增加flex-wrap: wrap属性，避免内容强制横向排列：
   需要修改的选择器对应属性如下：

.navbar>nav>ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.news>ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.membershome>ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

3. 可选优化：移除navbar>nav>ul>li的margin: auto属性，改用flex容器的justify-content和gap控制间距，适配效果更稳定。

修复验证 #

修改完成后刷新页面，调整浏览器窗口宽度即可看到小屏幕下内容会自动折行，右侧不会再出现多余空白。

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