CSS =＆gt;下拉内容权限下拉按钮

Question

在我的rails项目中，我使用一个下拉按钮，下拉内容在我的下拉按钮下打开。一切正常。这是代码：

.dropdown {
  padding: 10px 20px 0px 20px;
  position: relative;
  display: inline-block;
}
.dropbtn {
  background-color: none;
  border: none;
  cursor: pointer;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  white-space: nowrap;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  font-size: 12pt;
}
.dropdown-content a {
  color: #355264 !important;
  padding: 12px 16px;
  text-decoration: none !important;
  display: block;
}
.dropdown-content a:hover {
  background-color: #ffb465 !important;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: none;
}

<div class="dropdown">
          <div class="dropbtn"><%= image_tag("imprint.png") %></div>
          <div class="dropdown-content">
            <%= link_to I18n.t('basic.sign_out'), destroy_user_session_path, :method => :delete %>
            <%= link_to I18n.t('basic.friends'), fb_user_friends_path, :remote => true %>
          </div>
        </div>

是否可以将下拉内容定位到下拉按钮以及如何？

感谢您的帮助

Answer 1

将right: 20px;添加到.dropdown-content。它应该等于.dropdown的右边填充（在你的情况下为20px）。

＆＃13;

＆＃13;

.dropdown {
  padding: 10px 20px 0px 20px;
  position: relative;
  display: inline-block;
  margin: 10px 200px;
}
.dropbtn {
  background-color: none;
  border: none;
  cursor: pointer;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  white-space: nowrap;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  font-size: 12pt;
  right: 20px; /* added */
}
.dropdown-content a {
  color: #355264 !important;
  padding: 12px 16px;
  text-decoration: none !important;
  display: block;
}
.dropdown-content a:hover {
  background-color: #ffb465 !important;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: none;
}

＆＃13;

<div class="dropdown">
  <div class="dropbtn">Toggle</div>
  <div class="dropdown-content">
    dropdown-content
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你想让下拉内容正确，只需使用text-align：right; .dropdown-content class如下所示

.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
white-space: nowrap;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
font-size: 12pt;
text-align:right;

}

Answer 3

感谢您的帮助。最后我补充道：

right: -145px;
top: 0px;

到我的下拉内容。而已。现在它有效。