Question

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

html, body {
  background-color: green;
}

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

目标是在.top-bar区域下方始终保持1px实线。因此，当没有显示子导航时，请参见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空白始终存在。

Answer 1

Working demo

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

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

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

Answer 2

您可以在导航栏上使用白色边框底部，额外高度为1px：

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

Answer 3

将外框阴影添加到顶栏。喜欢这个：

 CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenWidth = screenRect.size.width -20;
    self.projectSegmentControl.frame = CGRectMake([UIScreen mainScreen].bounds.size.width-screenWidth-5,10, screenWidth, 30.0);
    _segmentControlView = [[UIView alloc] initWithFrame: CGRectMake(0,60, screenRect.size.width,47.0)];
    AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];

Answer 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/

顶部和子导航之间的空间

4 个答案:

Working demo