为什么我的第二个div会像它一样设置一个margin-top？

Question

我有两个用

设置的div

display: inline-block.

我不知道为什么但是第二个div总是在第一个div上滑落一点

div

就像它会设置一个margin-top。如何使第二个div与第一个div完全内联以及如何定位

<ul>

在第二个div的中心垂直和水平？

这是Codepen：http://codepen.io/anon/pen/EJhBK

边界不适用于最终项目。我已将它们放置在视觉上显示每个div的位置。

谢谢！

Answer 1

#nav {
width: 446px;
display: inline-block;
border: 1px solid green;
  vertical-align:top
}

添加对齐，这应该可以解决问题。

Answer 2

删除display: inline-block;并使用float:left