html - 如何修复按钮中的跨度包装

Question

我有一个 button 里面有 span 标签。 span 似乎占据了 button 的整个宽度，并且每个 span 都在一个新行上。我该如何解决这个问题，使 span 都在同一行中？

我想要什么

我得到了什么

代码(未显示属性):

<button>
    <span>[</span>
    <span>1/8</span>
    <span>1/8</span>
    <span>]</span>
    <span>[</span>
    <span>1/4</span>
    <span>]</span>
    <span>[</span>
    <span>1/8</span>
    <span>1/8</span>
    <span>]</span>
    <span>[</span>
    <span>1/4</span>
    <span>]</span>
</button>

Answer 1

尝试使用 display: flex; 您可以进一步研究 display: flex here

注意:给容器元素添加样式