-2

所以我在页面顶部有一个导航，在它下面有一个 div 块..

我想要的是让 div 块的边框通过导航栏上升..

这是一张图片来展示我到目前为止所拥有的：

边界 http://puu.sh/4pkgO.png

如果有人知道如何，感谢您的帮助！

4

3 回答 3

1

这是一个概念验证示例。细节将根据实际设计而有所不同。

从以下 HTML 开始：

<div class="nav-wrap">
   <ul class="nav">
       <li>Home</li>
       <li>About This</li>
    </ul>
</div>

并使用以下 CSS 规则：

.nav {
    text-align: center;
    border: 1px dotted lightgray; /* for demo only */
}
.nav li {
    display: inline-block;
    padding: 10px;
    margin: 0 20px;
    background-color: white;
}
.nav-wrap {
    position: relative;
    border-bottom: 1px solid blue;
    height: 20px;
}

这个想法是在导航 ( ) 周围添加一个包装块.nav-wrap，然后为其设置底部边框。然后，您可以通过调整包装器的高度来定位边框。

该.nav块实际上溢出了包装器，但在这种情况下，它提供了有用的效果。

在jsFiddle上查看演示

设计说明：包装块不是绝对必要的，但很多时候，您可能需要ul块来设置导航栏的整体高度或为多级菜单设置一些定位。包装器为您提供更多设计选项。

于 2013-09-12T10:47:36.667 回答
0

您可以将导航设置为具有绝对定位或使用 z-index。

于 2013-09-12T10:41:22.837 回答
0

为 div 边距赋予负值 - KK

于 2013-09-12T10:45:50.560 回答