导航栏Div元素位置异常，求助将搜索图标移至右上角

我是Web开发新手，正在为个人小项目制作导航栏，但元素无法正确对齐。当前效果如下：

我希望将搜索图标放置在屏幕右上角，尝试调整元素位置（例如使用align-self: flex-end）后，目标Div仍处于居中状态，问题未解决。以下是我的HTML和CSS代码：

原CSS代码 #

body {
  margin: 0;
  padding: 0;
}

.amatic-sc-regular {
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.amatic-sc-bold {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
}

.ul {
  font-family: "Amatic SC";
  font-size: 24px;
  font-weight: 700;
}

.imghref {
  display: block;
  height: 70px;
}

.linkclass {
  color: white;
  margin-right: 30px;
}

.linkclass:link {
  text-decoration: none;
}

.linkclass:visited {
  text-decoration: none;
}

.linkclass:hover {
  text-decoration: underline;
}

.linkclass:active {
  text-decoration: underline;
}

.menu_l {
  align-items: flex-start;
  margin-left: 2%;
  padding: 0;
  height: fit-content;
}

.menu_r {
  margin-right: 2%;
  padding: 0;
}

.navbar {
  margin: 0;
  background-color: black;
  height: 70px;
  display: flex;
  box-shadow: 5px 0px 5px;
  align-items: center;
  position: relative;
  width: 100%;
}

.navbarlogo {
  position: absolute;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  transform: translateX(+6%);
  transform: translateX(+400%);
}

.logoimg_w {
  width: 170px;
}

.search {
  width: 35px;
}

原HTML代码 #

<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap" rel="stylesheet">
<div id="menu" class="navbar">
  <div id="menu_l" class="menu_l">

    <ul id="ul" class="ul">
      <li>
        <a href="#" class="linkclass">За нас</a>
        <a href="#" class="linkclass">Ново</a>
        <a href="#" class="linkclass">Тениски</a>
        <a href="#" class="linkclass">Панталони</a>
        <a href="#" class="linkclass">Сиучъри</a>
        <a href="#" class="linkclass">Чорапи</a>
      </li>
    </ul>

  </div>

  <div id="img" class="navbarlogo">
    <a href="#" id="imghref" class="imghref">
      <img src="rsz_1logo_white.png" class="logoimg_w">
    </a>
  </div>

  <div id="menu_r" class="menu_r">
    <div class="iconr">
      <a href="#" class="iconhref">
        <img src="search1.png" class="search">
      </a>
    </div>
  </div>
</div>

<footer>

</footer>

问题分析与修复方案 #

核心问题 #

1. .navbar的align-items: center会强制所有子元素垂直居中，覆盖单独设置的对齐属性
2. .navbarlogo使用绝对定位+错误的transform，打乱了Flex布局的正常分配逻辑
3. 未利用Flex的justify-content特性分配左右元素的空间

具体修改步骤 #

1. 调整导航栏Flex布局逻辑

修改.navbar，移除多余定位属性，添加空间分配规则：

.navbar {
  margin: 0;
  background-color: black;
  height: 70px;
  display: flex;
  box-shadow: 5px 0px 5px;
  align-items: center;
  /* 移除position: relative */
  width: 100%;
  justify-content: space-between; /* 让左右元素分别靠两端，中间留空给logo */
}

2. 修复Logo定位

去掉绝对定位和错误的位移，让Logo作为Flex子元素居中：

.navbarlogo {
  /* 移除所有绝对定位和transform属性 */
  display: flex;
  align-items: center;
}

3. 让搜索图标定位到右上角

给右侧容器设置垂直对齐属性，让它靠顶部：

.menu_r {
  margin-right: 2%;
  padding: 0;
  align-self: flex-start; /* 脱离垂直居中，靠顶部对齐 */
  margin-top: 10px; /* 调整顶部间距，按需修改 */
}

4. 优化左侧菜单布局（可选）

将菜单链接拆分到独立<li>中，用Flex实现横向排列：

<ul id="ul" class="ul">
  <li><a href="#" class="linkclass">За нас</a></li>
  <li><a href="#" class="linkclass">Ново</a></li>
  <li><a href="#" class="linkclass">Тениски</a></li>
  <li><a href="#" class="linkclass">Панталони</a></li>
  <li><a href="#" class="linkclass">Сиучъри</a></li>
  <li><a href="#" class="linkclass">Чорапи</a></li>
</ul>

对应CSS优化：

.ul {
  font-family: "Amatic SC";
  font-size: 24px;
  font-weight: 700;
  display: flex; /* 横向排列 */
  list-style: none; /* 去掉默认圆点 */
  padding: 0;
  gap: 30px; /* 用gap代替margin-right，更规范 */
}

.linkclass {
  color: white;
  text-decoration: none;
}

.linkclass:hover, .linkclass:active {
  text-decoration: underline;
}

修改后的完整代码 #

最终CSS

body {
  margin: 0;
  padding: 0;
}

.amatic-sc-regular {
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.amatic-sc-bold {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
}

.ul {
  font-family: "Amatic SC";
  font-size: 24px;
  font-weight: 700;
  display: flex;
  list-style: none;
  padding: 0;
  gap: 30px;
}

.imghref {
  display: block;
  height: 70px;
}

.linkclass {
  color: white;
  text-decoration: none;
}

.linkclass:hover, .linkclass:active {
  text-decoration: underline;
}

.menu_l {
  margin-left: 2%;
  padding: 0;
}

.menu_r {
  margin-right: 2%;
  padding: 0;
  align-self: flex-start;
  margin-top: 10px;
}

.navbar {
  margin: 0;
  background-color: black;
  height: 70px;
  display: flex;
  box-shadow: 5px 0px 5px;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.navbarlogo {
  display: flex;
  align-items: center;
}

.logoimg_w {
  width: 170px;
}

.search {
  width: 35px;
}

最终HTML

<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap" rel="stylesheet">
<div id="menu" class="navbar">
  <div id="menu_l" class="menu_l">
    <ul id="ul" class="ul">
      <li><a href="#" class="linkclass">За нас</a></li>
      <li><a href="#" class="linkclass">Ново</a></li>
      <li><a href="#" class="linkclass">Тениски</a></li>
      <li><a href="#" class="linkclass">Панталони</a></li>
      <li><a href="#" class="linkclass">Сиучъри</a></li>
      <li><a href="#" class="linkclass">Чорапи</a></li>
    </ul>
  </div>

  <div id="img" class="navbarlogo">
    <a href="#" id="imghref" class="imghref">
      <img src="rsz_1logo_white.png" class="logoimg_w">
    </a>
  </div>

  <div id="menu_r" class="menu_r">
    <div class="iconr">
      <a href="#" class="iconhref">
        <img src="search1.png" class="search">
      </a>
    </div>
  </div>
</div>

<footer>
</footer>

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