如何在响应式顶部导航栏中固定下拉图标的位置

嘿，我看了你的问题，这个汉堡图标位置晃动的问题其实是因为布局里的几个小细节导致的，咱们一步步来解决它～

首先，问题的根源有两个：

• 你的.topnav用了百分比的左右内边距（10%），窗口缩放时这个内边距的实际像素值会跟着变，导致图标位置偏移；
• 原来用float布局来实现左logo右导航的结构，这种布局在响应式切换时很容易出现对齐混乱，尤其是调整元素定位时。

下面是具体的解决方案：

1. 改用Flex布局重构导航结构 #

Flex布局是更现代、更易控制的布局方式，能完美替代float实现你想要的左右对齐效果。

首先修改.topnav的CSS：

.topnav {
  overflow: hidden;
  background-color: blue;
  z-index: 100;
  display: flex; /* 启用flex布局 */
  justify-content: space-between; /* 让左右元素两端对齐 */
  align-items: center;
  position: relative; /* 新增：让子元素的absolute定位基于这个容器 */
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px 50px; /* 把百分比padding改成固定像素，避免窗口缩放时偏移 */
  box-sizing: border-box; /* 确保内边距算在容器宽度内，不超出屏幕 */
}

然后调整HTML，把右侧的导航项（包括下拉菜单和汉堡图标）放到一个单独的容器里，方便flex控制：

<div class="topnav" id="myTopnav">
  <div class="topnav-left">
    <a href="/"><img src="Img/Signature-Black.png"></a>
  </div>
  <!-- 新增右侧导航容器 -->
  <div class="topnav-right">
    <a href="./contact.html">Contact</a>
    <a href="./about.html"> About</a>
    <div class="dropdown">
      <button class="dropbtn">Blog <i class="fa fa-caret-down"></i></button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
      </div>
    </div>
    <a href="./photos.html">Photos</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
</div>

2. 清理旧的Float相关CSS #

因为改用了flex，原来的float设置可以删掉了，同时给右侧导航容器加flex布局：

/* 移除原来的float设置 */
.topnav a {
  /* float: right; 删掉这行 */
  color: black;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  margin-right: 35px;
}

.topnav-left {
  /* float: left; 删掉这行 */
}

.dropdown {
  /* float: right; 删掉这行 */
  overflow: hidden;
}

/* 让右侧导航项横向排列 */
.topnav-right {
  display: flex;
  align-items: center;
}

3. 调整响应式媒体查询，固定图标位置 #

现在修改媒体查询里的CSS，让汉堡图标在移动端始终固定在右上角：

@media screen and (max-width: 900px) {
  /* 隐藏除了图标之外的导航项 */
  .topnav-right a:not(.icon), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    display: block;
  }
}

@media screen and (max-width: 900px) {
  .topnav.responsive {
    flex-direction: column; /* 垂直排列所有元素 */
    align-items: flex-start; /* 左对齐 */
    padding: 30px 50px; /* 保持固定内边距 */
  }
  .topnav.responsive .topnav-right {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  /* 用absolute定位固定图标位置，和容器内边距对应 */
  .topnav.responsive .icon {
    position: absolute;
    right: 50px; /* 和.topnav的right padding一致 */
    top: 30px; /* 和.topnav的top padding一致 */
  }
  .topnav.responsive a {
    display: block;
    text-align: left;
    margin: 10px 0; /* 调整垂直间距，让布局更美观 */
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

为什么这样改能解决问题？ #

• 固定像素的内边距避免了窗口缩放时导航容器的左右间距变化；
• 用absolute定位让图标相对于导航容器固定位置，不会随其他元素移动；
• Flex布局替代float后，响应式切换时的布局逻辑更清晰，不会出现你之前遇到的“调整定位就打乱logo和导航顺序”的问题。

你可以根据自己的设计需求调整padding的数值（比如把50px改成你需要的大小），这样图标就能稳稳地固定在你想要的位置啦～

备注：内容来源于stack exchange，提问作者user23273441