如何将导航栏dropdown-content宽度设置为对应按钮宽度

核心问题点 #

1. 绝对定位元素缺少定位上下文：.dropdown-content设置了position:absolute，但父级.dropdown未添加position:relative，导致下拉菜单默认以body为定位基准，而非包裹按钮的.dropdown容器——这就是设置width:100%时下拉菜单撑满页面的根本原因。
2. 浮动容器的宽度未被正确继承：.dropdown用float:left时，宽度由内部按钮自然撑开，但因为没有定位上下文，下拉菜单无法继承这个宽度。

修复方案 #

只需修改两处CSS：

• 给.dropdown添加position: relative，为下拉菜单建立正确的定位上下文；
• 将.dropdown-content的min-width: 160px改为width: 100%（或min-width: 100%，按需选择），让下拉菜单与父级.dropdown宽度完全一致。

修改后的完整代码 #

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .navbar {
      overflow: hidden;
      background-color: #333;
    }
    
    .dropdown {
      float: left;
      overflow: hidden;
      position: relative; /* 新增：建立定位上下文 */
    }
    
    .dropdown .dropbtn {
      font-size: 16px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit;
      margin: 0;
    }
    
    .dropdown:hover .dropbtn {
      background-color: red;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      width: 100%; /* 修改：替换min-width为100% */
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
    
    .dropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    
    .dropdown-content a:hover {
      background-color: #ddd;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
  </style>
</head>

<body>

  <div class="navbar">
    <div class="dropdown">
      <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <div class="dropdown">
      <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <div class="dropdown">
      <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</body>
</html>

之前尝试失效的原因 #

• 方法1：未设置position:relative，width:100%的参考对象是body，导致下拉菜单撑满页面；
• 方法2：inline-block加负边距破坏了布局结构和定位上下文，下拉菜单无法找到正确的父级容器，hover时无法显示；
• 方法3：硬设固定宽度未考虑盒模型（如按钮的padding），加上定位上下文缺失，导致hover时宽度计算异常。

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