为什么我的第二个 div 的行为就像设置了 margin-top 一样？答案

【问题标题】：Why my second div acts like it would have a margin-top set up?为什么我的第二个 div 的行为就像设置了 margin-top 一样？
【发布时间】：2014-06-30 21:23:16
【问题描述】：

我用

设置了两个 div

display: inline-block.

我不知道为什么，但是第二个 div 与第一个相比总是下滑一点

div

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

<ul>

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

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

最终项目中不打算使用边框。我放置它们以直观地显示每个 div 的位置。

谢谢！

【问题讨论】：

使用vertical-align:top

标签： html css

【解决方案1】：

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

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

【讨论】：

感谢您这么快的回答。我现在就试试。
如果我将 position:absolute 添加到我的
@Danny_Student 你可以。我会在父容器 (<div id="nav">) 上使用 position: relative;，以便 <ul> 相对于 #nav 绝对定位，而不是绝对相对于文档。
Owkie dowkie。顺便提一句。只是想知道 - 为什么当我将 margin-top 添加到

【解决方案2】：

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

【讨论】：

但是在什么元素上？第一个 div 是 'logo' 还是 'nav' ？在那之后我需要做所谓的“清除浮动”吗？谢谢
放在#nav元素上，不需要清除浮动
感谢您的回答。我已经用过@Mathijs Segers 提出的方法