Question

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

我正在尝试创建一种外观，其中左侧按钮的下拉菜单内容保持原样，中间的下拉菜单内容居中对齐，右侧的下拉菜单内容与左侧的镜像相同，但从右向左

以下是当前网站的“可收藏”部分，位于首页下方。 https://timeandtimeagain.manakeep.com/

以下是该块的HTML代码： https://pastebin.com/mEECfh2T

以下是该块的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为例。

下拉Divs与标题按钮对齐

1 个答案: