如何实现Header内图标与输入框右对齐且无重叠？

步骤1：调整HTML结构 #

将搜索图标与输入框放入同一容器，便于统一控制布局：

<div class="toolbar" role="banner">
  <a routerLink="/cookbook" routerLinkActive="active">Cookbook</a>
  <a routerLink="/cookbook/create-recipe/-1" routerLinkActive="active">Add Recipe</a>
  <a routerLink="/cookbook/find-recipe" routerLinkActive="active">Find Recipe</a>
  <!-- 新增容器包裹搜索组件 -->
  <div class="search-container">
    <input class="search" matInput placeholder="Search">
    <mat-icon class="search-icon">search</mat-icon>
  </div>
</div>

步骤2：添加CSS样式 #

以下提供两种实现方案，可根据需求选择：

方案1：图标嵌入输入框右侧（无重叠）

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 64px;
  background-color: #f5f5f5;
}

.toolbar a {
  margin-right: 24px;
  text-decoration: none;
  color: #333;
}

.search-container {
  position: relative;
  width: 240px;
}

.search {
  width: 100%;
  padding-right: 40px; /* 为图标预留空间，避免文字重叠 */
  padding-left: 16px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  cursor: pointer;
}

方案2：图标与输入框并排右对齐

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 64px;
  background-color: #f5f5f5;
}

.toolbar a {
  margin-right: 24px;
  text-decoration: none;
  color: #333;
}

.search-container {
  display: flex;
  align-items: center;
  gap: 8px; /* 图标与输入框的间距 */
}

.search {
  width: 200px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-icon {
  color: #999;
  cursor: pointer;
}

核心逻辑说明 #

• .toolbar使用flex布局，通过justify-content: space-between让左侧导航与右侧搜索区域自动分占左右空间，实现整体右对齐。
• 方案1通过相对+绝对定位将图标固定在输入框内部右侧，输入框的padding-right确保文字不会覆盖图标；方案2用flex的gap属性控制图标与输入框的间距，避免重叠。

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