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;
}

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

使用position：absolute将它们移动到顶部，这是很好但标题和菜单层在彼此的顶部。

我知道我可以使用它并给菜单左边一些填充，使它位于标题旁边，但当页面大小减小时，菜单移动到图像和标题下面，所以我不希望显示填充然后，如果只能在css中完成，我宁愿不想出一些hacky jquery管理方法。

Answer 1

像这样？ http://jsfiddle.net/67sTt/1/

添加：

vertical-align: top

到菜单和标题

CSS标题没有排队。尝试使用顶部-20px其余菜单显示徽标而不排队

1 个答案: