如何防止居中对齐的弹性项目随着高度的增加而上升？

Question

我正在尝试构建一个下拉菜单，但它的 div（位置静态）在我向菜单中添加新项目时一直在上升。

align-items:center 规则不断重新定位项目，使其正确垂直对齐。

如果我放弃这条规则，它会破坏导航栏，其他项目将不会像我预期的那样居中。

如果我使用 display 属性，如下面的代码所示，按钮从我想要的位置开始，但每当我点击它时，它就会离开它的位置。

const dropdown = () => {
    let display = document.getElementById("menu").style.display;
    
    document.getElementById("menu").style.display = (display === "none") ? "block":"none";
    //toggling "visibility" takes the div out of its place
 }

.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height:160px;
    border:1px solid black;
    text-align: center;    
}

.dropdownContainer {
    margin-left: auto;
}

#drop {
  display:none;
  /* visibility:hidden;*/
}

<nav class="nav">
    <div>Irrelevant elements to this question</div>
    <div class="dropdownContainer">
        <button onclick="dropdown()" class="dropdownBtn">Ronaldinho</button> 
        <div id="menu">
            <!-- the more items added here, the more up the page the whole container goes -->
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
        </div>
    </div>
</nav>

如果我更改 JS 代码，使其改为切换 visibility 属性，则该按钮已经从其预期位置开始，但在单击时也不会改变位置。

如何让按钮保持居中，并在不改变按钮位置的情况下使菜单下拉？

Answer 1

我认为这就是你想要实现的目标：

我将您的菜单定位在绝对位置按钮下方。所以按钮不会改变它的位置。

const dropdown = () => {
    let display = document.getElementById("menu").style.display;
    
    document.getElementById("menu").style.display = (display === "none") ? "block":"none";
    //toggling "visibility" takes the div out of its place
 }

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 160px;
  border: 1px solid black;
  text-align: center;
}

.dropdownContainer {
  margin-left: auto;
  position: relative;
}

#drop {
  display: none;
  /* visibility:hidden;*/
}
#menu {
  position: absolute;
  top: 100%;
}

<nav class="nav">
    <div>Irrelevant elements to this question</div>
    <div class="dropdownContainer">
        <button onclick="dropdown()" class="dropdownBtn">Ronaldinho</button> 
        <div id="menu">
            <!-- the more items added here, the more up the page the whole container goes -->
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
        </div>
    </div>
</nav>

Answer 2

const dropdown = () => {
    let display = document.getElementById("menu").style.display;
    
    document.getElementById("menu").style.display = (display === "none") ? "block":"none";
    //toggling "visibility" takes the div out of its place
 }

.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height:160px;
    border:1px solid black;
    text-align: center;    
}

.dropdownContainer {
    margin-left: auto;
}

#drop {
  display:none;
  /* visibility:hidden;*/
}
#menu{
 display: block;
 position: absolute;
 height: 60px;
 overflow-y: auto;
 width: 80px;
}

<nav class="nav">
    <div>Irrelevant elements to this question</div>
    <div class="dropdownContainer">
        <button onclick="dropdown()" class="dropdownBtn">Ronaldinho</button> 
        <div id="menu">
            <!-- the more items added here, the more up the page the whole container goes -->
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
        </div>
    </div>
</nav>

如何防止居中对齐的弹性项目随着高度的增加而上升？

How to prevent a centered aligned flex item from going up as its height increases?

html

javascript

css

flexbox

dropdown