我有一个Press Me按钮,当按下时会打开一个下拉菜单.我的JavaScript可以工作,但我在使用CSS和HTML时遇到了以下问题:

当您点击Press Me时,下拉菜单打开,但它部分不在可见窗口中.您必须向右滚动才能看到问题.

我试着用带一些号码的right: px,但现在一点react 都没有.

// 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>

推荐答案

我只是从.dropdown-content个班级中go 掉position: absolute个,在.buttons个班级上增加text-align: right;个班级.

// 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>

Html相关问答推荐

如何在div中淡入和淡出渐变背景?

悬停效果在新西兰表上不起作用

如何在用css使用网格视图时设置宽度?

try 更新我的Node.js应用程序中的用户,但我收到错误.然而,当我使用postman 时,更新工作正常

网格中的图像zoom 不正确

标题在实时网站上闪烁

如何为卡片块制作侧丝带样式

如何影响 HTML 元素的哪些子元素导致其增长,哪些不增长?

我如何使用 html 在表格的单元格内实现下面显示的背景 colored颜色 加载器(请判断设计参考的图像链接)

如何将内容放置在侧边栏旁边?

如何围绕中心zoom svg 并使父级达到其子级大小的 100%

将组件移动到页面底部 Angular

Flex布局中,当父元素高度较高时,交叉轴上出现额外的空白问题.

什么没有 margin-right 和 width:100% 溢出子元素到左边?

如何在Bootstrap卡片底部添加波浪形状