下拉菜单位于窗口视图之外

Question

我有一个

Press Me

按钮，按下时会打开下拉菜单。我的 JavaScript 可以运行，但 CSS 和 HTML 存在以下问题：

当您单击

Press Me

时，下拉菜单将打开，但它部分不在可见窗口中。您必须向右滚动才能看到问题。

我尝试将

right: px

与某些数字一起使用，但现在它根本没有响应。

// NO PROBLEM HERE IN JAVASCRIPT!
function myFunction() {
    document.getElementsByClassName('dropdown-content')[0].classList.toggle('show');
}
window.onclick = function(event) {
    if (!event.target.matches('#verify-name')) {
        var dropdowns = document.getElementsByClassName('dropdown-content');
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

.buttons {
    display: flex;
    justify-content: flex-end;
    color: red;
}
.dropdown-content {
    display: none;
    position: absolute;
    width: 120px;
        padding: 14px;
        background-color: yellow;
}
.show {
    display: flex;
}

<div class="buttons">
    <div>
        <a id="verify-name" onclick="myFunction()">Press Me</a>

        <div class="dropdown-content">
            <span>Logout</span>
        </div>
    </div>
</div>

Answer 1

我只是从

position: absolute

类中删除

.dropdown-content

并将

text-align: right;

添加到

.buttons

类中。

// NO PROBLEM HERE IN JAVASCRIPT!
function myFunction() {
  document.getElementsByClassName('dropdown-content')[0].classList.toggle('show');
}
window.onclick = function(event) {
  if (!event.target.matches('#verify-name')) {
    var dropdowns = document.getElementsByClassName('dropdown-content');
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.buttons {
  display: flex;
  justify-content: flex-end;
  color: red;
  text-align: right;
}

.dropdown-content {
  display: none;
  direction: rtl;
  width: 120px;
  padding: 14px;
  background-color: yellow;
}

.show {
  display: flex;
}

<div class="buttons">
  <div>
    <a id="verify-name" onclick="myFunction()">Press Me</a>

    <div class="dropdown-content">
      <span>Logout</span>
    </div>
  </div>
</div>