你遇到的问题根源很明确：当前下拉菜单展开时处于正常文档流中，会占据页面空间把后面的按钮挤到下一行。咱们只需要调整CSS，让下拉菜单脱离文档流，就能让三个按钮始终保持在同一行啦。

修改后的CSS代码 #

.dropdown {
  display: inline-block;
  position: relative; /* 设置为相对定位，作为下拉菜单的定位父容器 */
  margin-right: 15px; /* 给按钮之间添加间距，提升视觉效果，可选 */
}

.dropdown-container {
  position: absolute; /* 脱离文档流，不影响其他元素布局 */
  top: 100%; /* 让菜单在按钮正下方展开 */
  left: 0;
  background: #ffffff; /* 添加背景色区分菜单与页面 */
  border: 1px solid #e0e0e0; /* 给菜单加边框，提升辨识度 */
  padding: 0;
  min-width: 130px; /* 设置最小宽度，避免菜单内容过窄 */
}

.dropdown-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dropdown-container li {
  padding: 8px 12px;
  cursor: pointer;
}

.dropdown-container li:hover {
  background-color: #f5f5f5; /* 鼠标悬停时的背景色变化，可选 */
}

其他代码说明 #

你的HTML和JavaScript代码完全不需要改动，保持原样即可。修改CSS后，点击任何一个下拉按钮，菜单会在对应按钮的下方展开，不会影响另外两个按钮的位置，三个按钮始终保持在同一行。

关键改动解释 #

• 给.dropdown添加position: relative：让它成为内部绝对定位元素的参考容器，确保下拉菜单只会相对于当前按钮展开，不会跑到页面其他位置。
• 给.dropdown-container添加position: absolute：让下拉菜单脱离正常文档流，它的显示/隐藏不会占用页面空间，也就不会把旁边的按钮挤到下一行了。

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