如何调整下拉菜单按钮的宽度？答案

【问题标题】：How to adjust width of drop down menu button?如何调整下拉菜单按钮的宽度？
【发布时间】：2021-01-29 20:39:50
【问题描述】：

我正在为我的导航栏构建一个下拉菜单。下拉菜单的样式看起来像我想要的那样。但是，我对下拉按钮的间距有疑问。基本上，按钮嵌入在一个宽度为 160 的 div 中，这基本上是打开下拉菜单的宽度。但是，我希望 div 仅具有按钮本身的宽度，而不是扩展下拉菜单的宽度。否则，带有大 div 的下拉菜单将移动导航栏的其他元素。

.button-container {
    position: relative;
    /*text-align: center;*/
    padding: 0;
    overflow:hidden;
      display:flex; /*Code Added */
      justify-content:flex-end;
     margin-left:auto;
    /*float: center;*/
      width:160px;
    }

    .button-container img{width:50px; height:50px; display:block; border-radius:50%} /* Code changed */


    /* The container <div> - needed to position the dropdown content */
    .dropdown {
      position: relative;
      display: inline-block;
    }

    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: white;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    /* Links inside the dropdown */
    .dropdown-content a {
      font-weight: 600; /*Semi-Bold = 600*/ /*Bold = 700*/
      font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      color:#666666;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      right: 4px;
      left: auto;
    }

    /* Change color of dropdown links on hover */
    .dropdown-content a:hover {
        color:#F16852;}

    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
      display: block;
    }

    /* Change the background color of the dropdown button when the dropdown content is shown */
    .dropdown:hover .dropbtn {
      background-color: #3e8e41;
    }

            <div class="dropdown">
                <div class="button-container">
                    <img src="http://www.fillmurray.com/g/300/300"/>
                </div> 
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>

非常感谢。我很高兴得到任何澄清。

【问题讨论】：

标签： html css

【解决方案1】：

尝试移除宽度：160px；对于 .button-container 和设置权限：0；在 .dropdown-content 上。

您不希望 .button-container 与 .dropdown-content 一样宽，但您已将其设置为相同的宽度！

您已经绝对定位了 .dropdown-content，但没有给出任何进一步的说明。说 right: 0 意味着它应该与最近的具有相对定位的父元素的右侧对齐（在这种情况下是您的 .dropdown 元素）。

【讨论】：