解决不同宽度Flex盒子空白填充问题，同时保留语言选择下拉菜单原有宽度

嘿，我明白你的问题了——既要消除两个Flex盒子之间的多余空白，又得让语言下拉菜单保持原本的宽度，对吧？咱们一步步来解决：

问题根源 #

你给.language_section设了固定的500px宽度，但内部的按钮和下拉菜单实际宽度远小于这个值，这就导致.language_section盒子本身存在大量空白，同时在居中的外层Flex容器里，它和旁边的.reverse_language之间也因为容器剩余空间产生了空隙。直接去掉.language_section的width会让它收缩到内容宽度，但下拉菜单也会跟着变窄，不符合需求。

可行解决方案 #

我们可以通过以下调整来实现目标：

1. 让.language_section自适应内容宽度，同时固定按钮和下拉菜单的宽度

首先修改.language_section的CSS，去掉固定宽度，改用自适应：

.language_section {
  /* 移除原来的width:500px */
  width: fit-content; /* 让容器宽度刚好包裹内部内容 */
  position: relative; /* 为下拉菜单的宽度对齐做准备 */
}

然后给语言按钮设置固定宽度，确保下拉菜单能和它对齐：

#select-lang-btn {
  display: flex;
  padding: 20px 15px;
  outline: none;
  cursor: pointer;
  background-color: white;
  align-items: center;
  width: 200px; /* 设置和你想要的宽度一致，比如原来按钮的实际宽度 */
  box-sizing: border-box; /* 确保padding不会撑宽按钮 */
}

最后让下拉菜单继承按钮的宽度：

.language_dropdown {
  padding: 0;
  display: none;
  list-style: none;
  cursor: pointer;
  width: 100%; /* 和父容器（.language_section）宽度一致，也就是按钮的宽度 */
  position: absolute; /* 避免下拉菜单撑开容器 */
  left: 0;
}

2. 消除两个Flex盒子之间的空隙

如果你希望.language_section和.reverse_language紧密挨着，不需要中间的空白，只需要调整外层Flex容器的间隙设置：

<!-- 修改外层容器的内联样式，添加gap:0 -->
<div style="display:flex; justify-content: center; gap: 0;">
  <div class="language_section">
    <!-- 原有的按钮和下拉菜单代码 -->
  </div>
  <div class="reverse_language"></div>
</div>

这样两个盒子就会紧挨着排列，同时整体保持居中。

效果说明 #

调整后，.language_section不会有多余的内部空白，和.reverse_language紧密贴合，下拉菜单的宽度会和按钮完全一致，完美满足你的需求。

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