水平导航与悬垂徽标

Question

解决方案： http://jsfiddle.net/wXjj8/898/

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

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

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

带有徽标（灰色圆圈）＆＃34;悬垂＆＃34;在这样的中间：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;，并在所有链接上声明margin-top:52px;以进行定位。

您还可以通过为所有“MENU”链接添加类名称并在CSS中引用而不是#nav a来使用类名来执行此操作。如果你想在中间链接圆圈，这很有用。

另外两件事：

• 不要忘记将img打包成li - 问题中的标记与JSFiddle不同
• 将alt=""标记添加到img元素

Answer 2

设置vertical-align属性可以解决问题。

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

是的，就像那样。

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

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