html - 按钮之间没有空格 'on next the line'

Question

我试图创建带有圆 Angular 的按钮来模拟菜单选项卡。如果屏幕不够宽，我希望按钮转到下一行。

我的问题是第一行和后面几行的按钮之间没有间距:

我正在尝试在 JSFiddle 中复制这个问题，但它不会在那里发生:

我的 HTML 是:

<div>
    <span class="menuButton">Button I Button I Button I</span>
    <span class="menuButton">Button II Button II Button II</span>
    <span class="menuButton">Button III Button III Button III</span>
</div>

我的 CSS 是:

.menuButton {
    color: #FFFFFD;
    background: #010109;
    margin: 3px 0px 3px 0px;
    padding: 1px 6px 0px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-family: 'Istok Web', sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

为什么我的页面有这个问题而不是 JSFiddle？我已经发布了(进行中的)页面 here .将窗口缩小到 320 像素宽以重现该问题。

Answer 1

您遇到问题是因为 span 自然是内联元素 (display:inline)。如果您要将它们显示为 inline-block，那么您的边距设置将适用。

.menuButton {
    /* ... existing definitons */

    display: inline-block;
}