求助：如何用Flexbox制作内嵌搜索图标的导航栏搜索栏？

我正在学习CSS Flexbox概念，目前正尝试用它制作导航栏。我希望将搜索栏制作成带圆角、搜索图标嵌入在输入框右侧内部的样式，当前我的搜索栏是输入框和图标分开的状态，附上我的HTML和CSS代码，恳请帮忙解决该问题。

我的HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />

<nav>
  <div class="search-bar">
    <input type="text" placeholder="Search" name="search" />
    <a href="#"><i class="fa fa-search"></i></a>
  </div>

  <div class="btn-icon">
    <div class="msg-icon">
      <a href="#"><img src="img/message-01.png" alt="message" /></a>
    </div>

    <div class="upload-icon">
      <a href="#"><img src="img/upload-01.png" alt="upload" /></a>
    </div>

    <div class="notif-icon">
      <a href="#"><img src="img/bell-01.png" alt="notification" /></a>
    </div>

    <div class="btn-profile">
      <a href="#"><img src="img/profile-01.png" alt="profile" /></a>
    </div>
  </div>
</nav>

我的CSS代码 #

@font-face {
  font-family: "campton-bold";
  src: url(fonts/campton-cufonfonts/CamptonBold.otf) format("opentype");
}

@font-face {
  font-family: "campton-light";
  src: url(fonts/campton-cufonfonts/CamptonLight.otf) format("opentype");
}

@font-face {
  font-family: "campton-medium";
  src: url(fonts/campton-cufonfonts/CamptonMedium.otf) format("opentype");
}

* {
  margin: 0;
  padding: 0;
}

a img {
  width: 40px;
}

nav {
  background-color: #003466;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  height: 50px;
  align-items: center;
}

nav .btn-icon {
  display: flex;
  width: 20%;
  justify-content: space-around;
}

nav .btn-icon a img {
  transition: transform 0.2s;
}

nav .btn-icon a img:hover {
  transform: scale(1.1);
}

.search-bar {
  display: flex;
  justify-content: center;
}

nav .search-bar input {
  border-radius: 20px;
  height: 35px;
  width: 370px;
  padding: 0 15px;
  box-sizing: border-box;
  font-family: campton-light;
  outline: none;
  border: none;
  font-size: 15px;
}

nav .search-bar a {
  text-decoration: none;
  display: flex;
  color: black;
  align-items: center;
  font-size: 20px;
}

要实现目标样式，只需调整.search-bar及内部元素的定位和内边距，让搜索图标嵌入输入框内，修改后的CSS代码如下：

@font-face {
  font-family: "campton-bold";
  src: url(fonts/campton-cufonfonts/CamptonBold.otf) format("opentype");
}

@font-face {
  font-family: "campton-light";
  src: url(fonts/campton-cufonfonts/CamptonLight.otf) format("opentype");
}

@font-face {
  font-family: "campton-medium";
  src: url(fonts/campton-cufonfonts/CamptonMedium.otf) format("opentype");
}

* {
  margin: 0;
  padding: 0;
}

a img {
  width: 40px;
}

nav {
  background-color: #003466;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  height: 50px;
  align-items: center;
}

nav .btn-icon {
  display: flex;
  width: 20%;
  justify-content: space-around;
}

nav .btn-icon a img {
  transition: transform 0.2s;
}

nav .btn-icon a img:hover {
  transform: scale(1.1);
}

.search-bar {
  display: flex;
  position: relative; /* 设置相对定位，作为图标定位容器 */
}

nav .search-bar input {
  border-radius: 20px;
  height: 35px;
  width: 370px;
  padding: 0 45px 0 15px; /* 增大右侧内边距，避免输入内容被图标遮挡 */
  box-sizing: border-box;
  font-family: campton-light;
  outline: none;
  border: none;
  font-size: 15px;
}

nav .search-bar a {
  text-decoration: none;
  display: flex;
  color: #666; /* 调整图标颜色，更贴合搜索栏风格 */
  align-items: center;
  font-size: 18px;
  position: absolute; /* 绝对定位嵌入输入框 */
  right: 12px; /* 距离输入框右侧的距离 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中对齐 */
  cursor: pointer;
}

关键修改点 #

1. 给.search-bar添加position: relative，让内部的搜索图标可以基于它定位
2. 调整输入框的padding-right为45px，给右侧的图标留出空间，防止输入内容被遮挡
3. 将搜索图标链接设置为position: absolute，通过right和transform属性固定在输入框右侧居中位置
4. 微调图标颜色和大小，让整体样式更协调

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