我需要为我的switch 主题按钮制作背景，但我陷入了这部分
这是我在switch 主题按钮部分中的代码
<div class="themeContainer">
<p>calc</p>
<div>
<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>
首先，我制作了一个跨度容器，这样其他元素就不会 break line ，但由于跨度自然地以内联方式显示，我无法更改它的高度.
之后，我try 将btnContainer更改为显示:inline-Block;但没有起作用
现在我有点迷失了，如果有人能在这件事上帮助我，我会很感激.
.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 .btnContainer {
background-color:hsl(224, 36%, 15%);
border-radius: 50%;
}
.themeContainer .themeText {
font-size: 12px;
margin-right: 10px;
}
.themeContainer button {
color: hsl(0, 0%, 100%);
background-color:hsl(224, 36%, 15%);
font-size: 12px;
max-width: 50px;
max-height: 50px;
width: 20px;
height: 20px;
margin: -1px;
border-radius: 50%;
border-style: none;
cursor: pointer;
}