居中并包含菜单 div

Question

我正在使用 css 和 bootstrap（用于 flex 网格）构建悬停菜单。如果我尝试将菜单放在任何父 div 中，我的菜单只会与父 div 一样宽。

此外，我似乎无法将悬停菜单置于菜单项长度的中心。

那么，如何让我的菜单项拉伸宽度，使文本不会换行，以及如何将与其链接相关的整个菜单居中？

html

  <div class="d-flex flex-row">
  <div class="dropdown">
    <button class="dropbtn">Small</button>
    <div class="dropdown-content">
      <a href="#">Link 1 long link</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn">Long Menu item</button>
    <div class="dropdown-content">
      <a href="#">Link 1 long link</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn">a really long Long Menu item</button>
    <div class="dropdown-content">
      <a href="#">Link 1 long link</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

CSS

    /* Dropdown Button */
    .dropbtn {
        color: #3a3a3a;
        padding: 16px;
        font-size: 16px;
       border: none;
  }

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

  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #cecece;
    color:#3a3a3a;
    z-index: 1;
    box-sizing: border-box;
}


.dropdown-content:after, .dropdown-content:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.dropdown-content:after {
    border-bottom-color: #fff;
    border-width: 13px;
    margin-left: -13px;
}
.dropdown-content:before {
    border-bottom-color: #cecece;
    border-width: 14px;
    margin-left: -14px;
}




/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

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

/* 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;
}

Answer 1

如何让我的菜单项拉伸宽度以使文本不会换行？

您可以使用 css 属性 white-space: nowrap;，因此 Text 永远不会换行到下一行。参见文档：https://www.w3schools.com/cssref/pr_text_white-space.asp

新行以及如何将与其链接相关的整个菜单居中？

因此，您可以设置一个位置left:50%，然后使用transform 属性设置值 translateX(50%) 将其恢复到其大小的 50%。将以下内容添加到.dropdown-content：

left: 50%;
transform: translateX(-50%);

/* Dropdown Button */
    .dropbtn {
        color: #3a3a3a;
        padding: 16px;
        font-size: 16px;
       border: none;
  }

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

  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #cecece;
    color:#3a3a3a;
    z-index: 1;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
}


.dropdown-content:after, .dropdown-content:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.dropdown-content:after {
    border-bottom-color: #fff;
    border-width: 13px;
    margin-left: -13px;
}
.dropdown-content:before {
    border-bottom-color: #cecece;
    border-width: 14px;
    margin-left: -14px;
}




/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}

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

/* 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;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex flex-row">
  <div class="dropdown">
    <button class="dropbtn">Small</button>
    <div class="dropdown-content">
      <a href="#">Link 1 long link</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn">Long Menu item</button>
    <div class="dropdown-content">
      <a href="#">Link 1 long link</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn">a really long Long Menu item</button>
    <div class="dropdown-content">
      <a href="#">Link 1 long link</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>