2015-04-22 28 views
0

我有一个临时即将到来的页面,当我在我的网站上工作时,我在页面上添加了另一个社交媒体按钮(电子邮件按钮),现在链接未对齐并且加倍彼此靠拢。我试图找出如何解决它,但似乎无法找出它缺少的东西。任何帮助,将不胜感激滚动按钮/图像不与链接对齐

下面是CSS & HTML:

ul.social 
{ 
width: 350px; 
margin: 80px auto 0; 
height: 62px; 
} 

ul.social li{ 
float: left; 
background: url(../images/social.png) left top no-repeat; 
position: relative; 
height: 62px; 
margin-right: 28px; 
} 

ul.social li a{ 
display: block; 
width: 62px; 
height: 62px; 
} 


ul.social li.facebook{ 
height: 62px; 
background-position: 0 0; 
width: 62px; 
} 

ul.social li.facebook:hover{ 
background-position: 0 -62px; 
} 



ul.social li.pinterest{ 
height: 62px; 
background-position: -90px 0; 
width: 62px; 
} 

ul.social li.pinterest:hover{ 
background-position: -90px -62px; 
} 



ul.social li.linkedin{ 
height: 62px; 
background-position: -180px 0; 
width: 62px; 
} 

ul.social li.linkedin:hover{ 
background-position: -180px -62px; 
} 

ul.social li.email{ 
margin-right: 0; 
height: 62px; 
background-position: -270px 0; 
width: 62px; 
} 

ul.social li.email:hover{ 
background-position: -270px -62px; 
} 

<div id="footer"> 
 
\t \t <div> 
 
\t \t <ul class="social"> 
 
\t \t \t <li class="facebook"><a href="https://www.facebook.com/heatherhannaydesigns"></li> 
 
\t \t \t <li class="pinterest"><a href="https://www.pinterest.com/heatherlindsey6/"></li> 
 
\t \t \t <li class="linkedin"><a href="www.linkedin.com/pub/heather-hannay/7b/33b/56b/en"></li> 
 
\t \t \t <li class="email"><a href="mailto:[email protected]"></li> 
 
\t \t </ul> 
 
\t \t </div> 
 
\t </div>

+0

您的HTML标记无效。不知道这是否是无意的,但锚标签''没有关闭,'...'。清理它,以及你想要实现的布局与你目前获得的布局的视觉效果。 – hungerstar

+0

谢谢!是完全无意的,绝对错过了! – Heatherh

回答

0

请关闭您的锚标记

并添加列表样式:没有;填充:0;先上课ul.social并重新检查。