如何实现垂直排列的按钮隐藏时不留白、显示时自动恢复原有位置

你现在的方案之所以达不到需求，是因为硬编码的<br>标签不会跟随按钮的显隐状态同步消失，按钮隐藏后空白间隔依然存在。下面是两种可行的实现方案：

方案1：Flex布局实现（更推荐，易维护） #

完全移除所有按钮后的<br>标签，将所有导航按钮放在同一个父容器中，通过CSS控制间距和排列：

HTML结构 #

<!-- 所有按钮放在同一个父容器里 -->
<div class="nav-container">
  <button id = "next" onclick="next()">
      Volgende
  </button>
  <button id = "prev" onclick="prev()">
      Vorige
  </button>
  <!-- 其他导航按钮同理 -->
</div>

CSS代码 #

.nav-container {
  /* 设置为垂直弹性布局 */
  display: flex;
  flex-direction: column;
  /* 调整数值对应你需要的按钮间距，代替原来的两个<br>效果 */
  row-gap: 24px;
}

后续控制按钮显隐直接修改按钮的display属性即可：

• 隐藏按钮：document.getElementById('next').style.display = 'none'
• 显示按钮：document.getElementById('next').style.display = 'inline-block'
  按钮设为display: none后会完全脱离文档流，Flex布局会自动调整剩余按钮的位置，自动填补空缺，恢复显示时也会自动撑开对应间距。

方案2：Margin实现（改动最小） #

如果不想调整现有HTML结构，只需要移除所有<br>标签，给按钮添加底部外边距控制间距即可：

button {
  /* 数值按需调整，代替原来的两个<br>间距 */
  margin-bottom: 24px;
}
/* 可选：最后一个按钮不需要额外底部间距可以加这条规则 */
button:last-of-type {
  margin-bottom: 0;
}

同样通过display属性控制按钮显隐即可，按钮隐藏时对应的margin也会同步消失，不会留下空白间隔。

注意：不要使用visibility: hidden控制按钮隐藏，该属性只会让元素不可见，仍然会占据原有文档流位置，无法实现自动上移的效果。

内容的提问来源于stack exchange，提问作者MadTurltess