CSS标题没有排队。尝试使用Top -20px的返回菜单显示徽标未排队

Question

我正在尝试制作一个标题栏，其中包含图像，后跟标题和菜单车。 在50px之后显示栏，我希望图像稍微向上移动，使其在包装div的顶部并在上面的50px中显示一点。 在包装div上使用位置绝对和与图像的位置相对，然后将其移动到20px工作正常，但当我这样做的时间在div中的其余元素保持下面。有没有办法将其他元素移动到它们是内联的图像？

我已经尝试在这里做了一个简单的jsfiddle： http://jsfiddle.net/ 67stt /

html：

<div class='headerContainer'>
<div class='logoContainer'>
</div>
<div class='title'>
  <h2>Header</h2>
</div>
<nav class='menu'>
  <ul>
      <li>first</li>
      <li>second</li>
  </ul>
</nav>
</div>

.

css：

.headerContainer {
  top: 50px;
  background-color: green;
  position: absolute;
  width: 100%;
}

.logoContainer {
  height: 120px;
  width: 120px;
  background-color: red;
  display: inline-block;
  position: relative;
  top: -20px;
}

.title {
  font-style: italic;
  display: inline-block;
  position: relative;
  padding: 0;
}

.menu {
  display: inline-block;
  position: relative;
}

.

我需要标题和菜单在图像中间排列（红色框）。

使用位置：绝对将它们移动到顶部，该顶部是正常的，但标题和菜单层彼此顶部。

我知道我可以使用它并将菜单带给左边的一些填充，以便它位于标题旁边，但是当页面大小缩小时，菜单在图像和标题下方移动，所以我不希望填充显示然后，我宁愿没有提出一些言辞jQuery的管理方式，如果它只能在CSS中完成。

Answer 1

这样吗？ http://jsfiddle.net/67stt/1/

添加：

vertical-align: top

.

要菜单和标题