使用HTML和CSS修复浮动面板可隐藏面板按钮水平对齐问题

问题原因 #

你的代码里，.hideable-panel的CSS已经设置了display: flex; flex-direction: row来实现水平排列，但JS逻辑中，当显示面板时用了style.display = ""，这会让元素恢复默认的display: block，导致flex布局失效，子按钮变成垂直排列。

修复方法 #

方法一：修改JS逻辑，明确设置显示模式为flex #

把所有JS中显示面板的代码从style.display = ""改成style.display = "flex"，确保flex布局生效：

const heatmapHideablePanel = document.getElementById("heatmap-hideable-panel")!;
const landmarkHideablePanel = document.getElementById("landmark-hideable-panel")!;
const footscanHideablePanel = document.getElementById("footscan-hideable-panel")!;
const insoleHideablePanel = document.getElementById("insole-hideable-panel")!;

document.getElementById("heatmap-main-button")?.addEventListener("click", () =>
{
  if (heatmapHideablePanel.style.display === "none") {
    heatmapHideablePanel.style.display = "flex";
    landmarkHideablePanel.style.display = "none";
    footscanHideablePanel.style.display = "none";
    insoleHideablePanel.style.display = "none";
  } else {
    heatmapHideablePanel.style.display = "none";
  }
});
document.getElementById("landmark-main-button")?.addEventListener("click", () =>
{
  if (landmarkHideablePanel.style.display === "none") {
    heatmapHideablePanel.style.display = "none";
    landmarkHideablePanel.style.display = "flex";
    footscanHideablePanel.style.display = "none";
    insoleHideablePanel.style.display = "none";
  } else {
    landmarkHideablePanel.style.display = "none";
  }
});
document.getElementById("footscan-main-button")?.addEventListener("click", () =>
{
  if (footscanHideablePanel.style.display === "none") {
    heatmapHideablePanel.style.display = "none";
    landmarkHideablePanel.style.display = "none";
    footscanHideablePanel.style.display = "flex";
    insoleHideablePanel.style.display = "none";
  } else {
    footscanHideablePanel.style.display = "none";
  }
});
document.getElementById("insole-main-button")?.addEventListener("click", () =>
{
  if (insoleHideablePanel.style.display === "none") {
    heatmapHideablePanel.style.display = "none";
    landmarkHideablePanel.style.display = "none";
    footscanHideablePanel.style.display = "none";
    insoleHideablePanel.style.display = "flex";
  } else {
    insoleHideablePanel.style.display = "none";
  }
});

方法二：改用类控制显示隐藏（推荐，避免破坏布局） #

这种方式不会覆盖CSS的display属性，还能添加过渡动画：

1. 修改CSS，新增显示控制类：

#floating-panel {
  position: fixed;
  top: 80%;
  left: 97%;
  z-index: 9999;
  transform: translate(-50%, -50%);
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 控制主按钮垂直间距 */
}

.subpanel {
  position: relative;
}

.hideable-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  right: 100%;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease; /* 可选过渡动画 */
}

.hideable-panel.show {
  visibility: visible;
  opacity: 1;
}

.icon-container {
  display: flex;
  align-items: center;
  width: 50px;
  height: 50px;
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.icon-container img {
  display: block;
  max-width: 100%;
  height: auto;
}

.icon-container:hover {
  background-color: #3e8e41;
  cursor: pointer;
}

2. 修改HTML，移除行内的display: none：

<div id="floating-panel">
  <div id="heatmap-panel" class="subpanel">
    <div id="heatmap-hideable-panel" class="hideable-panel">
      <button id="heatmap-move-button" class="icon-container"><img src="assets/drag.png"></button>
      <button id="heatmap-rotate-button" class="icon-container"><img src="assets/rotation.png"></button>
      <button id="heatmap-transparency-button" class="icon-container"><img src="assets/visibility.png"></button>
    </div>
    <button id="heatmap-main-button" class="icon-container main-button"><img src="assets/heatmap.png"></button>
  </div>
  <div id="landmark-panel" class="subpanel">
    <div id="landmark-hideable-panel" class="hideable-panel">
      <button id="landmark-move-button" class="icon-container"><img src="assets/drag.png"></button>
      <button id="landmark-transparency-button" class="icon-container"><img src="assets/visibility.png"></button>
    </div>
    <button id="landmark-main-button" class="icon-container main-button"><img src="assets/destination.png"></button>
  </div>
  <div id="footscan-panel" class="subpanel">
    <div id="footscan-hideable-panel" class="hideable-panel">
      <button id="footscan-transparency-button" class="icon-container"><img src="assets/visibility.png"></button>
      <button id="footscan-move-button" class="icon-container"><img src="assets/drag.png"></button>
      <button id="footscan-rotate-button" class="icon-container"><img src="assets/rotation.png"></button>
    </div>
    <button id="footscan-main-button" class="icon-container main-button"><img src="assets/foot.png"></button>
  </div>
  <div id="insole-panel" class="subpanel">
    <div id="insole-hideable-panel" class="hideable-panel">
      <button id="insole-transparency-button" class="icon-container"><img src="assets/visibility.png"></button>
      <button id="insole-move-button" class="icon-container"><img src="assets/drag.png"></button>
      <button id="insole-rotate-button" class="icon-container"><img src="assets/rotation.png"></button>
    </div>
    <button id="insole-main-button" class="icon-container main-button"><img src="assets/insoles.png"></button>
  </div>
</div>

3. 修改JS逻辑，通过类切换控制显示：

const heatmapHideablePanel = document.getElementById("heatmap-hideable-panel")!;
const landmarkHideablePanel = document.getElementById("landmark-hideable-panel")!;
const footscanHideablePanel = document.getElementById("footscan-hideable-panel")!;
const insoleHideablePanel = document.getElementById("insole-hideable-panel")!;

// 重置所有面板状态
function resetPanels() {
  heatmapHideablePanel.classList.remove("show");
  landmarkHideablePanel.classList.remove("show");
  footscanHideablePanel.classList.remove("show");
  insoleHideablePanel.classList.remove("show");
}

document.getElementById("heatmap-main-button")?.addEventListener("click", () =>
{
  const isVisible = heatmapHideablePanel.classList.contains("show");
  resetPanels();
  if (!isVisible) heatmapHideablePanel.classList.add("show");
});

document.getElementById("landmark-main-button")?.addEventListener("click", () =>
{
  const isVisible = landmarkHideablePanel.classList.contains("show");
  resetPanels();
  if (!isVisible) landmarkHideablePanel.classList.add("show");
});

document.getElementById("footscan-main-button")?.addEventListener("click", () =>
{
  const isVisible = footscanHideablePanel.classList.contains("show");
  resetPanels();
  if (!isVisible) footscanHideablePanel.classList.add("show");
});

document.getElementById("insole-main-button")?.addEventListener("click", () =>
{
  const isVisible = insoleHideablePanel.classList.contains("show");
  resetPanels();
  if (!isVisible) insoleHideablePanel.classList.add("show");
});

内容的提问来源于stack exchange，提问作者Zoltán Orosz