2015-04-22 68 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並重新檢查。