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>
您的HTML標記無效。不知道這是否是無意的,但錨標籤''沒有關閉,'...'。清理它,以及你想要實現的佈局與你目前獲得的佈局的視覺效果。 – hungerstar
謝謝!是完全無意的,絕對錯過了! – Heatherh