使社交网络图标水平

时间:2013-05-22 04:42:13

标签: html css

我很难让我的社交图标保持水平。我认为将它们向左移动可以解决问题或使元素成为内联块。我被困住所以任何帮助都表示赞赏。谢谢!

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

2 个答案:

答案 0 :(得分:0)

删除“width:43px;”来自#social。

答案 1 :(得分:0)

尝试从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(没有图片)