html - 在 CSS 中放置我的社交图标

标签 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>

谢谢你的帮助!

最佳答案

它似乎工作正常。

看看这个JSFiddle

我在按钮中添加了以下标签:

float:left;

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

希望这对您有所帮助!

关于html - 在 CSS 中放置我的社交图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21389301/

相关文章:

jquery:如何在单击特定元素时显示特定的 DIV 集

html - 如何使用填充和加长 Bootstrap 搜索栏?

c++ - 如何使用C++运行时从CSS提取ANTLR4引号的字符串

javascript - 如何使用 jQuery 更改 Font-Awesome 内容的占位符?

javascript - 使用外部链接控制光滑的 slider

javascript - 有什么方法可以控制 EMBED 代码视频吗?

html - JSF h :dataTable creates single empty cell when no records

html - CSS 边框仅显示在我从数据库中获取的其中一篇帖子上

javascript - 带有 html、css 和 js 的箭头按钮的水平导航栏

html - <div> 元素表现得好像隐藏在某些不可见的东西后面