html - 下拉 Div 与标题按钮对齐

Question

我目前正在尝试开发一个三按钮系统，以在我的游戏网站中显示三个收藏品。我目前已经准备好按钮，但右边的那个飞出了屏幕，中间的看起来飞了。

我正在尝试创建一种外观，其中左侧按钮具有原样的下拉内容，中间与下拉内容对齐中心，右侧与下拉内容镜像左侧但从右到左.

这是当前网站，主页下方有“收藏品”部分: https://timeandtimeagain.manakeep.com/

这是该 block 的 HTML 代码: https://pastebin.com/mEECfh2T

这是该 block 的 CSS 代码:

#artifactsButton p {
     padding: 5px;
     text-align: center;
   }

#floraButton p {
     text-align: right;
     word-wrap: break-word;

  }

 #collectiblesHeader {
   text-align: center;
  }

 #artifactsButton {
   float: left;
      }

 #floraButton {
   float: right;
   padding-right: 10px;
 }

 #lettersButton {
   float: right;
   padding-right: 290px;
 }

 .dropbtn {
   font-size: 28px; 
   border: none;
   outline: none;
   color: white;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit; 
   margin: 0; 
 }

 .navbar a:hover, .dropdown:hover .dropbtn {
   background-color: grey;
 }


 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   max-width: 500px;
   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;
}

Answer 1

首先要做的是将 .dropdown 类设置为 position: relative;。 然后您可以使用 absolute 属性。

例子:

.dropdown {
    position: relative;
}

#artifactsButton .dropdown .dropdown-content {
    left: 0;
    top: 100%;
    min-width: 300px;
}

#lettersButton .dropdown .dropdown-content {
    right: 0;
    top: 100%;
    min-width: 300px;
}

#floraButton .dropdown .dropdown-content {
    top: 100%;
    left: -160px;
    min-width: 300px;
}

在 #floraButton 的情况下，你必须设置 left 手册，我根据我的决议设置它。

这是一个解决方案，但我建议您以更好的方式分配 div。以flexbox为例。