网站顶部导航栏链接与下拉按钮等宽设置技术求助

你的问题出在下拉按钮的容器.dropdown未设置宽度，且按钮宽度未与容器联动，再加上默认盒模型会让padding撑开元素，最终导致宽度不一致。以下是修改后的代码及关键调整说明：

修改后的CSS代码 #

/* 全局统一盒模型，避免padding撑开宽度 */
* {
  box-sizing: border-box;
}

.topnav {
  width: 84%;
  overflow: hidden;
  background-color: #706f6f;
  margin: auto;
}

.topnav a {
  float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  width: 14%; /* 6个导航元素：6×14%=84%，与topnav宽度完全匹配 */
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
  width: 14%; /* 给下拉容器设置和普通链接一致的宽度 */
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  width: 100%; /* 按钮填满整个下拉容器 */
  text-align: center; /* 保证按钮文字居中，和其他导航链接对齐 */
}

.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;
  width: auto; /* 重置下拉菜单内链接的宽度，避免继承14% */
}

.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 a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
    width: auto; /* 移动端汉堡按钮无需固定宽度 */
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    width: 100%; /* 移动端所有元素占满容器宽度 */
  }
  .topnav.responsive .dropdown {float: none; width: 100%;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
  .dropdown-content{
      display: none;
    }
}

关键修改点 #

• 全局设置box-sizing: border-box：让元素的padding、border包含在设置的宽度内，避免额外撑开元素尺寸，保证14%宽度是实际显示的宽度。
• 给.dropdown添加width:14%：让下拉容器和普通导航链接宽度一致，作为按钮的父容器提供基准宽度。
• 将.dropbtn宽度改为100%：按钮填满整个下拉容器，继承容器的14%宽度，与普通链接完全对齐。
• 给.dropbtn添加text-align:center：确保按钮文字居中，和其他导航链接的排版统一。
• 重置下拉菜单内链接宽度为auto：避免继承父元素的14%宽度，保证下拉菜单正常展开显示。
• 调整移动端元素宽度：确保响应式状态下布局正常。

HTML代码无需修改，直接使用你提供的原代码即可。

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