使用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; /* 垂直居中对齐Flex项目 */
}

.topnav > div {
    flex: 1; /* 使所有直接子元素等宽并自动填充可用空间 */
    text-align: center; /* 使每个导航项内部内容居中 */
}

.topnav a {
    /* float: left; */ /* 在Flexbox布局下，此属性通常不再需要 */
    display: block; /* 确保链接占据其父容器的全部宽度 */
    color: #ffffff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    width: 100%; /* 链接填充其父Flex项目的全部宽度 */
    box-sizing: border-box; /* 确保padding和border包含在width内 */
}

.topnav .dropbtn {
    width: 100%; /* 下拉按钮填充其父Flex项目的全部宽度 */
}

/* 其他样式保持不变或根据需要微调 */
.topnav .icon {
  display: none;
}

.dropdown {
  /* float: left; */ /* 在Flexbox布局下，此属性通常不再需要 */
  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 .link:not(:first-child),
    .dropdown .dropbtn {
        display: none; /* 默认隐藏除第一个链接外的所有导航项和下拉按钮 */
    }

    .topnav .link.icon,
    .topnav .link .icon {
        float: right; /* 汉堡菜单图标右浮动 */
        display: block; /* 显示汉堡菜单图标 */
    }

    .topnav.responsive {
        position: relative;
        flex-wrap: wrap; /* 允许Flex项目换行 */
    }

    .topnav.responsive > div {
        flex: 0 0 100%; /* 在响应式模式下，每个Flex项目占据100%宽度，实现垂直堆叠 */
    }

    .topnav a {
        text-align: left; /* 链接文本左对齐 */
        width: auto; /* 宽度自适应 */
    }

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

    .topnav.responsive .link {
        float: none; /* 移除浮动 */
        display: block; /* 块级显示 */
        text-align: left;
    }

    .topnav.responsive .dropdown {
        float: none; /* 移除浮动 */
    }

    .topnav.responsive .dropdown-content {
        position: relative; /* 相对定位，适应垂直堆叠 */
    }

    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%; /* 下拉按钮占据100%宽度 */
        text-align: left;
    }

    .dropdown-content {
        display: none; /* 默认隐藏下拉内容 */
    }
}

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