Значки социальных сетей горизонтальные

Question

Мне сложно сделать социальные иконки горизонтальными. Я думал, что их плавание останется хитростью или сделает элемент встроенным блоком. Я застрял, поэтому любая помощь приветствуется. Спасибо!

<!-- Social network icons --> 
<div id="social"> 
<ul class="soclist"> 
<li><a class="youtube" href="img/youtube-logo.png" target="_blank" title="youtube"></a></li> 
<li><a class="twitter" href="img/twitter-logo.png" target="_blank" title="twitter"></a></li> 
</ul> 
</div> 

CSS:

/* Social Sidebar */ 

ul.soclist li { 
display: inline-block 
} 

#social { 
position: fixed; 
top: 2px; 
right: 73px; 
width: 43px; 
display: block; 
} 


a.youtube { 
width: 48px; 
height: 48px; 
background: url(../img/youtube-logo.png) no-repeat; 
display: block; 
} 



a.twitter { 
width: 48px; 
height: 48px; 
background: url(../img/twitter-logo.png) no-repeat; 
display: block; 
} 

Answer 1

Удалить "ширина: 43px;" из #social.

Answer 2

Попробуйте удалить display:block из a:

a.youtube { 
width: 48px; 
height: 48px; 
background: url(../img/youtube-logo.png) no-repeat; 
/*display:block;*/ 
} 



a.twitter { 
width: 48px; 
height: 48px; 
background: url(../img/twitter-logo.png) no-repeat; 
/*display:block;*/ 
} 

here is an example inlining your links (без изображения)