html - 导航栏中间的标志搞乱了导航的其余部分

Question

我尝试将所有导航项居中并水平对齐

但是，当我将我的 .logo 类添加到导航栏时，我所有的导航项都会向下移动。我该如何解决这个问题？

这是 JSFiddle:http://jsfiddle.net/nq397fby/

Answer 1

http://jsfiddle.net/AlexCharlton/nq397fby/6/

ul.navigation li {
    vertical-align: top;
    display: table-cell;
    height: 40px;
    width: 20%;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
}

.logo {
    position:relative;
    top: -30px;
    left: 6px;
}