将我的社交图标放在CSS中

时间:2014-01-27 18:57:58

标签: html css

我一直在我的网页顶部添加社交图标,我已经能够横向添加3但是当我尝试添加另一个它不会显示时,如果有的话,请你看看我的代码任何错误,谢谢你

CSS;

#social  {
top:18px;
left:15px;
height:32px;
width:500px;
position:absolute;
z-index:2;
}

.facebook {
background-image:url(../img/64_x_64px/facebook_dark.png);
height:32px;
width:32px;
background-size:32px;
display:inline-block;
}
.facebook:hover {
background-image:url(../img/64_x_64px/facebook_active.png);
}
.twitter {
background-image:url(../img/64_x_64px/twitter_dark.png);
height:32px;
width:32px;
background-size:32px;
display:inline-block;
}
.twitter:hover {
background-image:url(../img/64_x_64px/twitter_active.png);
}
.in {
background-image:url(../img/64_x_64px/in_dark.png);
height:32px;
width:32px;
background-size:32px;
display:inline-block;
}
.in:hover {
background-image:url(../img/64_x_64px/in_active.png);
}
.youtube {
background-image:url(../img/64_x_64px/youtube_dark.png);
height:32px;
width:32px;
background-size:32px;
display:inline-block;
}
.youtube:hover {
background-image:url(../img/64_x_64px/youtube_active.png);
}

HTML;

<body>
<div id="social">
<div class="facebook"></div>
<div class="twitter"></div>
<div class="in"></div>
<div class="youtube"></div>
</div>
<div id="logo">
</div>
<div id="bar">
</div>
<div id="middle">
</div>
</body>
</html>

谢谢你的帮助!

1 个答案:

答案 0 :(得分:2)

似乎工作正常。

看看这个JSFiddle

我在按钮上添加了以下标记:

float:left;

但它在我的浏览器上运行正常,甚至以前。 也许你只是错过了第四张图片?

希望这有帮助!