CSS UL李鏈接問題

Question

我有這個網站在這裏：http://jamessuske.com/freelance/seasons/

在底部你會看到社交媒體圖標和我遇到的問題是，當我把我的鼠標移到他們，他們是無法點擊，只有當我將我的鼠標向左一點點，我不明白我做錯了什麼：

HTML

<ul class="social-media"> 
<li class="twitter"><a href="#">&nbsp;</a></li> 
<li class="instagram"><a href="#">&nbsp;</a></li> 
<li class="facebook"><a href="#">&nbsp;</a></li> 
</ul> 

CSS

ul.social-media{ 
    padding-top:30px; 
} 

ul.social-media li{ 
    float:left; 
    padding-left:5px; 
    list-style:none; 
} 

ul.social-media li.twitter{ 
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png); 
    background-position-x:0px; 
    width:25px; 
    height:26px; 
} 

ul.social-media li.instagram{ 
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png); 
    background-position-x:-26px; 
    width:25px; 
    height:26px; 
} 

ul.social-media li.facebook{ 
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png); 
    background-position-x:-52px; 
    width:25px; 
    height:26px; 
} 

任何幫助，將不勝感激。謝謝。

Answer 1

這是因爲填充左你li元素

Answer 2

很可能是因爲您的聯繫是如此之小的設置。 試試這個：

.social-media a { 
    display:block; 
    height:100%; 
    width:100%; 
} 

，使其充滿整個<li>，站在了精靈。

Answer 3

可點擊區域的大小取決於a標籤的內容。您的a標記沒有任何內容。 一種解決方案是將背景圖像直接應用於a標記並將顯示屬性更改爲塊。

ul.social-media li.twitter a { 
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png); 
    background-position-x:0px; 
    width:25px; 
    height:26px; 
    display: block; 
} 

請注意，我們還需要設置顯示到塊自錨標記是默認的內聯元素。 寬度和高度屬性僅對塊元素產生影響。