顶部和子导航之间的空间答案

【问题标题】：Space between top and sub navigation顶部和子导航之间的空间
【发布时间】：2016-05-21 10:36:17
【问题描述】：

我创建了一个带有子导航的导航，请参阅JSFiddle with subnavigation。我有一个问题，在黄色背景的顶部导航和红色背景的子导航之间，我希望有1px solid white 的距离来分隔两个区域。目前使用这个 CSS 定义

html, body {
  background-color: green;
}

我尝试在 <nav class="top-bar" data-topbar> 周围放置另一个 div 并设置 background-color: white; 但没有成功。

目标是在.top-bar 区域下方始终有一条 1 像素的实线。因此，当没有显示子导航时，请参阅JSFiddle without subnavigation，应该有这个分隔符。我试着用

来实现它

.top-bar {
  background: yellow;
  border-bottom: 10px solid white; /*10px only to see that the border is inside the box*/
}

但边框不在黄色top-bar 框之外，它在里面，我不想拥有。此外，最好有一个组合，以便顶部和 sb 导航之间的 1px 空白始终存在。

【问题讨论】：

标签： html css navigationbar

【解决方案1】：

Working demo

您的边框解决方案几乎是正确的，只需更改box-sizing 属性，使边框不会放在div 内：

.top-bar {
    background: yellow; border-bottom: 10px solid white;
    box-sizing: content-box;
}

这是默认值，但您包含的 Foundation 会使用 box-sizing: border-box; 覆盖此值。

【讨论】：

这看起来很棒！非常感谢！但是还有一个问题：在您的工作演示中，topnav 和 subnav 之间的空间似乎是 2 个像素，对吧？我的 CSS 三角形有 1 像素，我希望两者（三角形和空间）都有 1 像素，这样看起来更好。啊，还有一件事：通常边框在框外，为什么在这种情况下不是这样？
@Tim 那条线是 1px 宽，是你的三角形颜色似乎更亮（可能是因为它是对角线），是的，默认情况下边框在框外，但你包括覆盖它的基础。

【解决方案2】：

将外框阴影添加到您的顶栏。像这样：

.top-bar{
 background: yellow;
 box-shadow:0 0 1px #fff;
}

【讨论】：

我不要阴影，我要1px实线。
如果添加 1px 阴影，它看起来与 1px 实线相同

【解决方案3】：

您可以在导航上使用具有 1px 额外高度的白色边框底部：

.top-bar { height:71px; border-bottom:1px solid #fff; }

【讨论】：

这也可以，但@totymedli 是对的，我必须覆盖box-sizing，然后我不必增加top-bar 的高度。

【解决方案4】：

在.menu-center .active > a:before, .menu-center .active > a:after 上添加 Z-INDEX 和

    ul.sub-menu {
        background-color: red;
        display: block;
        left: 0;
        border-top: 1px solid #FFF;
        position: absolute;
        right: 0;
        text-align: center;
        top: 100%;
    }

http://jsfiddle.net/aytaxykf/12/

【讨论】：

只有在显示子导航时才有效。不显示的情况，则不工作。