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）设置为等宽 */
.topnav > div {
    flex: 1; /* 弹性因子为1，均匀分配可用空间 */
    text-align: center; /* 文本居中 */
}

/* 导航链接和下拉按钮填充其父容器的宽度 */
.topnav a {
    display: block; /* 确保链接占据全部可用宽度 */
    color: #ffffff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    width: 100%; /* 填充父 div 的宽度 */
    box-sizing: border-box; /* 确保 padding 不会增加总宽度 */
}

.topnav .dropbtn {
    width: 100%; /* 下拉按钮填充父 div 的宽度 */
}

/* 现有下拉菜单和响应式样式保持不变 */
.topnav .icon {
  display: none;
}

.dropdown {
  overflow: hidden; /* 移除 float: left; 因为 Flexbox 会处理布局 */
}

.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 .link:not(:first-child),
    .topnav .dropdown { /* 隐藏所有 dropdown 项 */
        display: none;
    }
    /* 显示响应式图标 */
    .topnav .link.icon {
        float: right; /* 图标浮动到右侧 */
        display: block;
    }

    /* 响应式导航栏展开时的样式 */
    .topnav.responsive {
        position: relative;
        flex-wrap: wrap; /* 允许项目换行 */
    }

    /* 响应式模式下，每个导航项占据整行宽度 */
    .topnav.responsive > div {
        flex: 0 0 100%; /* 不伸缩，宽度为100% */
    }

    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive .link {
        float: none;
        display: block;
        text-align: left;
    }

    .topnav.responsive .dropdown {
        float: none;
        display: block; /* 在响应式模式下显示下拉菜单 */
    }

    .topnav.responsive .dropdown-content {
        position: relative; /* 相对定位，避免超出布局 */
    }

    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }

    .dropdown-content {
        display: none; /* 默认隐藏，通过 hover 或 JS 控制 */
    }
}