0

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

我的问题是第一行的按钮和以下几行的按钮之间没有间距：

在此处输入图像描述

我试图在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 中出现此问题？我已在此处发布（正在进行的工作）页面。将窗口缩小到 320 像素宽以复制问题。

4

3 回答 3

2

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

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

    display: inline-block;
}
于 2013-09-19T15:45:00.027 回答
1

尝试向包含的 div 添加行高：

<div class="menu">
    <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>

.menu {
    line-height: 1.2;
}
.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;
}

http://jsfiddle.net/kKQ5A/

如果这不起作用，那么我确信有另一种样式应用于导致问题的包含元素。

于 2013-09-19T15:47:18.197 回答
0

您正在使用spans哪个内联元素而不是块元素，因此它们不尊重 css 样式，例如margin. 更改您spans的divs属性或给跨度属性display:inline-block;

于 2013-09-19T15:47:11.820 回答