如何解决跨距环绕在按钮中的问题

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

注意：将样式添加到容器元素