使下拉菜单项始终与其父项具有相同的大小？（引导程序和 CSS）答案

【问题标题】：Make Dropdown Menu Item always have the same size as its parent? (Bootstrap & CSS)使下拉菜单项始终与其父项具有相同的大小？（引导程序和 CSS）
【发布时间】：2017-02-15 00:20:01
【问题描述】：

我有一个带有下拉菜单的导航栏（悬停时）。我希望下拉菜单项的大小与父项相同。

这是一张图片：

所以我现在希望“一”和“二”具有与“这是一个下拉菜单”完全相同的大小（至少在宽度方面）。现在它们有点太大了。当我调整窗口大小时，父元素（“这是一个下拉菜单”）会改变大小，然后“一”和“二”应该相应地调整大小。

代码

我有一个包含不同元素的导航栏，其结构基本如下：

<div class="container-fluid nopadding navbar"> <!-- NAVBAR -->
  <div class="row">

    <div class="container-fluid col-xs-12 col-sm-12 col-md-10"> <!-- MENU -->
      <div class="row">

        <div class="dropdown col-xs-12 col-sm-2">
          <div class="container-fluid">
            <div class="row">
              <button class="dropbtn col-xs-12">This is a dropdown</button>
              <div class="dropdown-content col-xs-12 nopadding">
                <a href="#">One</a>
                <a href="#">Two</a>
              </div>
            </div>
          </div>
        </div>
...more navbar elements follow here

    </div>
   </div>

  </div>
</div>

这是一些 CSS：

/* Dropdown Button */
.dropbtn {
    background-color: #F6F8FB;
    border: none;
    cursor: pointer;
    font-family: AlegreyaSansSC-Light;
    font-size: 16px;
    color: #637F92;
    letter-spacing: 0.52px;
    height: 81px;
}
/* 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: #F6F8FB;

  z-index: 1;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background: rgb(221, 232, 241); /* Fallback for older browsers without RGBA-support */
  background: rgba(221, 232, 241, 0.95);
}

/* Links inside the dropdown */
.dropdown-content a {
  padding: 30px;
  text-align: center;
  text-decoration: none;
  display: block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
    top: 81px;
    position: absolute;
}

为了确定，我在这里包含的内容太多了。

【问题讨论】：

您可以使下拉内容的宽度：100% 当您将其设置为相对的父位置时。然后确保 a 元素不比这宽所以删除它的填充
谢谢。父元素到底是什么？我会假设dropbtn，还是只能是直系父母？（在这种情况下，引导类 row ？）

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您应该从.dropdown-content a 元素中删除padding：

.dropdown-content a {
  /*padding: 30px;*/
  text-align: center;
  text-decoration: none;
  display: block;
}

【讨论】：

但是我的下拉菜单项中没有填充（所有内容一起缩小）。它也比它的父级更大（更宽）。
您的 css 中可能有一些其他样式的填充/边距。使用开发人员工具栏检查您获得它的原因并删除必要的内容。

【解决方案2】：

尝试在您的.dropbtn 和.dropdown:hover .dropdown-content 中添加width: 100%;。这应该将所有元素设置为父宽度。

【讨论】：