实现等宽导航栏：Flexbox布局与响应式设计实践

<div class="topnav" id="myTopnav">
    <div class="link">
        <a href="/index.html">Home</a>
    </div>
    <div class="dropdown">
        <button class="dropbtn">Products</button>
        <div class="dropdown-content">
            <a href="/product.html">ALL PRODUCTS</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="dropbtn">Services</button>
        <div class="dropdown-content">
            <a href="/services.html">All Services</a>
        </div>
    </div>
    <div class="link">
        <a href="/contact.html">Contact</a>
    </div>
    <div class="link">
        <a href="/about.html">About</a>
    </div>
    <div class="link">
        <a href="#">Customer Login</a>
    </div>
    <div class="link icon">
        <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
    </div>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

.topnav {
  width: 84%; /* 导航栏总宽度 */
  overflow: hidden;
  background-color: #706f6f;
  margin: auto;
  display: flex; /* 启用Flexbox布局 */
  align-items: center; /* 垂直居中对齐子项 */
}

/* 将所有直接子元素（.link和.dropdown）设置为等宽的Flex项 */
.topnav > div {
  flex: 1; /* 均匀分配可用空间 */
  text-align: center; /* 内容水平居中 */
}

/* 确保链接和按钮填充其父Flex项的全部宽度 */
.topnav a {
  /* float: left; /* 移除浮动，由Flexbox控制布局 */
  display: block; /* 使链接成为块级元素，可以设置宽度和内边距 */
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  width: 100%; /* 填充其父div.link的全部宽度 */
  box-sizing: border-box; /* 确保padding不增加总宽度 */
}

.topnav .dropbtn {
  width: 100%; /* 填充其父div.dropdown的全部宽度 */
}

/* 以下是原有CSS，略作调整以适应新结构 */
.topnav .icon {
  display: none; /* 默认隐藏，在小屏幕下显示 */
}

.dropdown {
  /* float: left; /* 移除浮动 */
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none; /* 移除浮动 */
  color: #706f6f;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #2d2e83;
  color: #ffffff;
  transition: .5s;
}

.dropdown-content a:hover {
  background-color: #2d2e83;
  color: #ffffff;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  /* 在非响应模式下（小屏幕，未点击图标），隐藏所有导航项，只显示图标 */
  .topnav > div:not(.icon) {
    display: none;
  }
  .topnav > div.icon {
    float: right; /* 将图标浮动到右侧 */
    display: block;
  }

  /* 响应模式下（点击图标后） */
  .topnav.responsive {
    position: relative;
    flex-wrap: wrap; /* 允许Flex项换行 */
  }

  /* 在响应模式下，所有导航项（div.link和div.dropdown）占据100%宽度，垂直堆叠 */
  .topnav.responsive > div {
    flex: 0 0 100%; /* 不增长，不收缩，固定宽度100% */
    display: block; /* 确保所有项都显示 */
  }

  /* 调整响应模式下图标的位置 */
  .topnav.responsive > div.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  /* 调整响应模式下链接和按钮的样式 */
  .topnav.responsive a,
  .topnav.responsive .dropbtn {
    text-align: left; /* 左对齐 */
    width: 100%; /* 确保填充其父容器的宽度 */
  }

  .dropdown-content {
    /* 在响应模式下，下拉内容默认隐藏，但如果需要，可以调整为相对定位 */
    display: none;
  }
}