为什么我的div上面有不必要的差距?

时间:2014-04-30 12:55:55

标签: css html5

我想实现这个目标: enter image description here

但社交图标div之上存在不必要的差距。该页面位于http://goo.gl/K17Fjs

我的标记: -

<header>
<img src="images/home-layout_02.jpg" alt="Salem Al Hajri Logo">
<div id="top-social">
Follow us on <img src="images/home-layout_05_01.jpg" alt=""><img src="images/home-layout_05_02.jpg" alt=""><img src="images/home-layout_05_03.jpg" alt="">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Projects</li>
<li>Photo Gallery</li>
<li>Contact</li>
</ul>
</nav>
</header>

我的CSS:

body {
margin: 0 auto;
background-attachment: scroll;
/*background-image: url(images/home-layout_08.jpg);*/
background-repeat: repeat-x;
background-position: bottom;
}
header {width: 920px; margin: 0 auto;}
#top-social {float: right; text-align: right; vertical-align: middle; padding-top: 13px; width: 538px;}
nav {float: right; width: 538px; text-align: right; margin-top: 45px;}
nav li { display: inline;}

4 个答案:

答案 0 :(得分:0)

删除“padding-top:13px;”来自你的CSS。

答案 1 :(得分:0)

将style.css行:10更改为:

#top-social {
  float: right;
  text-align: right;
  vertical-align: middle;
  /*padding-top: 13px;*/
  width: 538px;
}

有一个13像素的顶部填充。

答案 2 :(得分:0)

带有float: right的元素将被其前面的其他元素推下。您可以通过更改标记来移动#top-socialnav <img>之前解决此问题。

然而,在这种情况下,我认为将顶级社交和导航绝对定位到包含标题的右上角和右下角会更好。这将允许您轻松获取社交链接下方的导航链接并保持此外观。

header {
    position: relative;
}
#top-social {
    position: absolute;
    top: 0px;
    right: 0px;
}

答案 3 :(得分:0)

要实现布局,您需要将徽标图像浮动。

请参阅 FIDDLE

添加此CSS:

header > img {
    float: left;
}

这:header > img {}表示propeties仅适用于您案例中<header>标记的第一个子图片,徽标图片,而不适用于社交图标。