Question

我做了一个顶部栏，右侧有下拉菜单按钮。但是这个下拉内容与我的MENU按钮具有完全相同的大小（宽度）。最后 - 我的目标是使这个下拉内容与顶部栏一样宽。

我的HTML代码如下所示：

<div id="top-bar">
  <div class="dropdown">
    <button class="dropbtn">MENU</button>
    <div class="dropdown-content">
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
    </div>
  </div>
</div>

更重要的部分 - CSS：

#top-bar{
  left: 0;
  top: 0;
  float: left;
  width:100%;
  height:40px;
  background-color: black;
}
.dropbtn {
    background-color: blue;
    color: white;
    height: 40px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}
.dropdown {
    float: right;
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    float: left;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
    color: black;
    padding: 10px 14px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
    display: block;
    width: 100%;
    float: left;
    left: 0;
}
.dropdown:hover .dropbtn {
    background-color: blue;
}

如果你想看看HERE是什么样的jsFiddle链接。
你不知道如何解决我的问题吗？

Answer 1

将position: relative从.dropdown移至#top-bar。

通过这样做，.dropdown-content将根据距width最近的元素position: relative来计算#top-bar。

#top-bar{
  position: relative;
  height:40px;
  float: left;
  width: 100%;
  background-color: black;
}

.dropbtn {
  background-color: blue;
  color: white;
  height: 40px;
  font-size: 12px;
  border: none;
  cursor: pointer;
}

.dropdown {
  float: right;
}

.dropdown-content {
  display: none;
  left: 0;
  top: 100%;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: black;
  padding: 10px 14px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: blue;
}

<div id="top-bar">
  <div class="dropdown">
    <button class="dropbtn">MENU</button>
    <div class="dropdown-content">
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
    </div>
  </div>
</div>

Answer 2

我认为这就是你想要的

＆＃13;

#top-bar{
  left: 0;
  top: 0;
  float: left;
  width:100%;
  height:40px;
  background-color: black;
}

.dropbtn {
  display: block;
  float: right;
    background-color: blue;
    color: white;
    height: 40px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

.dropdown {
    width: 100%;
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    float: left;
    background-color: #f9f9f9;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 10px 14px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
    width: 100%;
    float: left;
    left: 0;
}

.dropdown:hover .dropbtn {
    background-color: blue;
}

＆＃13;

<div id="top-bar">
  <div class="dropdown">
    <button class="dropbtn">MENU</button>
    <div class="dropdown-content">
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
    </div>
  </div>
</div>

＆＃13;

https://jsfiddle.net/69uts0dr/3/

CSS：使下拉菜单与顶栏一样宽

2 个答案: