0

我有一个结构如下的标题：

<div class=wrapper>
   <div id="header">[insert divs html]</div>
   <div id="wordpressmenu">[insert divs html]</div>
   <div id="Social_Media_Menu">[insert divs html]</div>
</div>

社交媒体菜单是新的——我今天下午才添加的。以前，Wordpress 菜单和徽标（徽标在标题 div 内）在我的主菜单上方对齐。由于添加了具有更大图像的社交媒体菜单，wordpress 菜单和徽标现在对齐不正确 - 它们与社交媒体导航图像的顶部对齐。

我想将 wordpress 菜单与之前的位置对齐 - 底部。下面的两张图片显示了这一点：

过去的样子（正确对齐） 在此处输入图像描述

然后添加了 div 社交媒体菜单 在此处输入图像描述

现在徽标底部和主菜单之间有一个间隙。原来的橙色菜单和主导航之间也有差距。

为什么要这样做？我尝试将 wordpress nav（橙色导航）和社交媒体导航的属性设置为 display: inline 并给它们固定宽度。没运气。

谁能看到如何消除这个差距，以便主导航与徽标和橙色导航之间的空间与添加社交媒体按钮之前一样？

网站在这里（老实说，我不知道要包括哪个 CSS） http://tinyurl.com/c8djrvr

4

2 回答 2

2

如果您正在寻找一个快速而简单的解决方案，margin-top: -38px可能#social会让您到达那里，或者关闭。或者在#social 上使用负上边距的组合，#wpmenu直到你得到你想要的。

它排列在原来的位置，因为您在 #header 上设置了 130px 的高度 - #social 和 #wpmenu div 的顶部正沿着它的底部边缘排列，正如它们应该的那样。#header 不会增长到包含稍大的徽标图像高度（188 像素，包括顶部填充），它保持在设置的 130 像素高度。徽标是可见的，因为它是元素overflow: visible的默认设置。div我通过 Chrome 开发工具将 rgba 背景颜色添加到 #header 和 #social 来说明这一点。（#social 上的 0.2 不透明绿色，#header 上的 0.2 不透明橙色）。

在此处输入图像描述

于 2013-10-06T00:40:57.173 回答
1

那家伙是这样排列的，因为

  • 菜单是float:right, 和 block ( display:block) 浮动元素往往会粘在顶部。
  • 徽标被包裹在<a>标签中，并且两者都是内联的，因此它们尊重标题上的行高。
  • 社交按钮会强制提高该标题的高度，因此所有元素都会上升

老实说，实际上并不是这样，编码应该有点语义，但这几乎就是在做的事情。

使固定

#social{ 
    position:relative; 
    margin-top:-36px 
} /* I hope I got the alignment right */
于 2013-10-06T00:56:07.653 回答