将导航栏下拉内容宽度设置为其按钮的宽度

问题描述 投票：0回答：1

当制作单个按钮时，我能够制作一个按钮宽度的下拉菜单，但是对多个按钮做同样的事情来制作导航栏一直很困难。

很明显，我对元素宽度有一些基本的误解或缺乏知识，但无论我如何修改值或谷歌，我似乎都无法弄清楚它是什么。即使将宽度值明确设置为 100px 也会使下拉内容的宽度正确，但在悬停时由于某种原因变得太长。

代码

<!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;
    }
    
    .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;
      min-width: 160px;
      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>

首先，我尝试将 dropdown-content 的宽度设置为 100%，因为我认为这会占用其容器（下拉列表）的整个宽度，我认为这只是包含按钮所需的宽度，但这显然是错误的.链接一直延伸到页面末尾。

接下来，我尝试将下拉列表类设置为具有负边距的内联块，这使得当我将鼠标悬停在链接上时链接甚至没有弹出。

最后，我尝试将所有 

width
显式设置为 
100px
。这有助于使下拉内容的 
width
成为我想要的样子，但是当我将鼠标悬停在它上面时它由于某种原因变宽了？我也尝试过在 here 中实现答案，但由于某种原因它没有再次显示链接

那么，我错过了什么？如何让按钮只占用它需要的空间，同时让该按钮下方的下拉内容占用相同的

width
？在此先感谢您的帮助。

html css width
1个回答
0
投票

使您的下拉宽度与链接宽度相同，例如在您的情况下，它正在创建宽度为 118.51px 的链接。

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 118.51px;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
    z-index: 1;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.