Question

我有一个带有结构的标题：

<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菜单与之前的位置对齐 - 底部。下面的两张图片显示了这一点：

以前是怎样的（正确对齐） enter image description here

然后添加div社交媒体菜单 enter image description here

现在徽标底部和主菜单之间存在间隙。原橙色菜单与主导航之间也存在差距。

为什么这样做？我已经尝试设置wordpress nav（橙色导航）和社交媒体导航的属性来显示：内联并给定固定宽度。没有运气。

任何人都可以看到如何消除这种差距，以便主导航和徽标以及橙色导航之间的空间与添加社交媒体按钮之前的空间相同吗？

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

Answer 1

如果您正在寻找快速而肮脏的解决方法，margin-top: -38px上的#social可能会让您到达或关闭。或者在#social和#wpmenu上使用负顶部边距的组合，直到你得到你想要的结果。

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

enter image description here

Answer 2

那家伙是这样对齐的，因为

菜单是float:right，阻止（display:block）浮动元素往往会粘在顶部。
徽标包含在<a>标记中，两者都是内嵌的，因此它们尊重标题上的行高。
社交按钮强制该标题的高度，所以所有元素都上升

说实话，这不是那种方式，编码应该是一个小的语义，但它正是在做什么。

<强>修正

#social{ 
    position:relative; 
    margin-top:-36px 
} /* I hope I got the alignment right */

为什么兄弟元素在顶部对齐？

2 个答案: