移动端页面Banner右侧空白及搜索栏对齐问题求助

一、移动端右上角空白区域问题 #

核心原因 #

1. 未配置移动端视口标签，导致设备默认布局规则引发偏移
2. .banner-content 使用 align-items: center 但未声明 display: flex，布局属性失效
3. .welcoming 字体尺寸（120px）过大，在移动端超出容器宽度，挤压出横向空白

修复方案 #

1. 在HTML头部添加视口元标签，锁定移动端适配规则：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 修复Banner的flex布局，确保内容居中：

.banner-content {
  padding: 20px;
  align-items: center;
  display: flex; /* 新增 */
  justify-content: center; /* 新增，确保文字水平居中 */
}

3. 针对移动端动态调整字体大小，避免溢出：

@media (max-width: 768px) {
  .welcoming {
    font-size: 40px; /* 根据移动端屏幕调整为合适尺寸 */
  }
}

4. 全局禁止横向滚动，彻底消除空白：

html, body {
  margin: 0;
  overflow-x: hidden; /* 新增 */
}

二、搜索栏对齐异常问题 #

核心原因 #

1. .search-input 同时设置 width:100% 和 margin:15px，导致容器宽度超出父级.wrapper
2. 未对搜索框内部元素（input、icon）做布局控制，元素排版混乱

修复方案 #

1. 调整容器边距，避免宽度溢出：

.wrapper .search-input {
  text-align: center;
  margin: 15px 0; /* 左右边距改为0，防止挤压宽度 */
  box-sizing: border-box; /* 确保内边距/边距计入总宽度 */
}

2. 用flex布局实现input与搜索图标的对齐：

.wrapper .search-input {
  background: #fff;
  width: 100%;
  border-radius: 5px;
  position: relative;
  box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);
  font-family: 'Poppins', sans-serif;
  display: flex; /* 新增 */
  align-items: center; /* 新增，垂直居中 */
  padding: 0 15px; /* 新增，避免内容贴边 */
}

.search-box {
  flex: 1; /* 让输入框占满剩余宽度 */
  border: none; /* 移除默认边框 */
  outline: none; /* 移除聚焦边框 */
  padding: 12px 0; /* 调整内边距，优化点击区域 */
  font-size: 16px;
}

.icon {
  cursor: pointer;
  font-size: 18px;
  color: #666;
}

3. 合并冗余样式，保持代码整洁：

/* 删除重复的.wrapper .search-input样式，合并为以下代码 */
.wrapper .search-input {
  text-align: center;
  margin: 15px 0;
  box-sizing: border-box;
  background: #fff;
  width: 100%;
  border-radius: 5px;
  position: relative;
  box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  padding: 0 15px;
}

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