CSS уль Ли связывает вопрос

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

Это из-за отступы левого вы установили на литиево элемент

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; 
} 

Обратите внимание, что мы также должны установить дисплей в блок поскольку якорь тег встроенный элемент по умолчанию. ширина и высота атрибуты только действуют на блок элементы.