带有悬垂徽标的水平导航

Question

我将通过两个单独的 JSFiddles 来解释我的问题...

请展开结果窗格以查看所需结果。

我正在尝试显示这样对齐的菜单：http://jsfiddle.net/wXjj8/899/

中间有一个标志（灰色圆圈）"overhanging"：http://jsfiddle.net/wXjj8/898/

如您所见，当我在菜单中添加徽标时，它与黑色菜单栏下方对齐。

CSS:

.menu {
    position:fixed;
    top:0px;
    width:100%;
    height:120px;
    background-color:black;
    z-index:100;
}

.navigation{  
    width: 100%;
    list-style: none;
    text-align: center;
    height: 20px;
    line-height: 20px;
    display: inline-block;
}
#nav2 {
    text-align: center;
    height: 50px;
    margin: 30px auto;
    width: 80%;
}
#nav { 
    text-align: center; 
}
#nav li {
    list-style: none; 
    display: inline-block; 
}
#nav a {
    color: #3297FD; 
    display: block; 
    font-family:arial; 
    text-transform: uppercase; 
    font-weight: bold; 
    margin: 0; 
    padding: 9px 18px 9px; 
    text-decoration: none; 
}
#nav a:hover {
    background-color: #2D89E5; 
    color: #fff; 
}

HTML:

<div class="menu">
    <div id="nav2">
        <ul id='nav' class="navigation">
            <li><a href="#">Menu1</a></li> 
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
            <li><img src="http://i.imgur.com/POe3phs.png"/></li>
            <li><a href="#">Menu4</a></li>
            <li><a href="#">Menu5</a></li>
            <li><a href="#">Menu6</a></li>
        </ul>
    </div>
</div>

提前感谢您的所有提示！

Answer 1

#nav li 和 #nav a 的这两个块应该大致达到您想要的结果：

#nav li {
    list-style: none;
    vertical-align:top;
    display:inline-block;
}
#nav a {
    color: #3297FD; 
    display: block; 
    font-family:arial; 
    text-transform: uppercase; 
    font-weight: bold; 
    margin-top:52px;
    padding: 9px 18px 9px; 
    text-decoration: none; 
}

基本上声明所有列表项 vertical-align:top; 和所有 link 上的 margin-top:52px; 用于定位。

您也可以使用 class 名称来执行此操作，方法是将 class 名称添加到所有“菜单”link 并在 CSS 中引用该名称而不是 #nav a。如果您还想 link 中间的圆圈，这很有用。

另外两件事：

不要忘记将您的 img 包装成 li——您问题中的标记不同于 JSFiddle
向 img 元素添加 alt="" 标签

Answer 2

可以通过设置 vertical-align 属性.

解决问题

#nav li {
    vertical-align: middle; /*add this line*/
}

是的，就是这样。

已更新演示 http://jsfiddle.net/wXjj8/903/

另一个问题是 <img> 在 OP 的 JSFIDDLE 上缺少 <li> 容器。

带有悬垂徽标的水平导航

Horizontal Nav with Overhanging Logo

html

css

nav

responsive-design