主题切换按钮背景实现遇阻，寻求CSS布局解决方案

你遇到的核心问题是btnContainer作为内联元素没有足够空间展示背景，且样式设置不符合预期效果，以下是调整后的代码和说明：

修改后的HTML（结构无需大改，仅补充外层容器类名） #

<div class="themeContainer">
  <p>calc</p>
  <div class="themeControl">
    <span class="themeText">THEME</span>
    <span class="btnContainer">
      <button id="switchTheme1">1</button>
      <button id="switchTheme2">2</button>
      <button id="switchTheme3">3</button>
    </span>
  </div>
</div>

修改后的CSS #

.themeContainer {
  color: hsl(0, 0%, 100%);
  width: 535px; 
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.themeContainer p {
  font-size: 30px;
  margin-left: 10px;
}

/* 新增：让主题文字和按钮容器垂直居中对齐 */
.themeContainer .themeControl {
  display: flex;
  align-items: center;
}

.themeContainer .btnContainer {
  background-color: hsl(224, 36%, 15%);
  /* 把圆形圆角改成长条圆角，匹配预期效果 */
  border-radius: 15px;
  /* 强制转为行内块级元素，确保宽高、padding生效 */
  display: inline-block;
  /* 给容器内边距，让按钮和背景边框有间距 */
  padding: 5px 8px;
}

.themeContainer .themeText {
  font-size: 12px;
  margin-right: 10px;
}

.themeContainer button {
  color: hsl(0, 0%, 100%);
  /* 按钮默认透明，透出容器背景 */
  background-color: transparent;
  font-size: 12px;
  width: 20px;
  height: 20px;
  /* 调整按钮间距，避免重叠 */
  margin: 0 3px;
  border-radius: 50%;
  border-style: none;
  cursor: pointer;
}

/* 可选：给选中的按钮添加高亮背景，匹配预期效果 */
.themeContainer button.active {
  background-color: hsl(6, 63%, 50%);
}

关键修改点说明： #

• 给包裹themeText和btnContainer的外层div添加display:flex; align-items:center;，确保文字和按钮容器垂直居中对齐。
• 给btnContainer设置display:inline-block后，必须添加padding（或指定宽高），否则容器会因为内部按钮的默认布局无法撑开，背景也就显示不出来。
• 将btnContainer的border-radius:50%改为15px，从圆形背景改成符合预期的长条圆角背景。
• 把按钮的背景色改为透明，让容器的背景透出来，选中的按钮可以通过添加active类来设置高亮背景。

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