如何在水平线而不是垂直线中显示社交媒体图标

时间:2013-09-14 15:48:22

标签: html css

我在Shopify上有一个网上商店。在产品页面的产品说明下,我将社交媒体图标连续显示。如何调整它们以水平方向并排显示?

以下是产品页面的链接: http://www.vapestore.co/collections/featured-products/products/innokin-itaste-svd

这是一些CSS代码:

.icon-social { display:block; float:left; }
.icon-social { margin-right:5px; margin-bottom: 5px; }
.icon-social { text-indent:-9999px; width:32px; height:32px; opacity:0.3; filter: alpha(opacity = 30); background: url({{ 'social-icons-light-bg.png' | asset_url }}) no-repeat; }
.icon-social:hover { opacity:0.6; filter: alpha(opacity = 60); }
.icon-social.twitter { background-position: 0 0; }
.icon-social.facebook { background-position: -50px 0; }
.icon-social.youtube { background-position: -100px 0; }
.icon-social.atom { background-position: -150px 0; }
.icon-social.instagram { background-position: -200px 0; }
.icon-social.pinterest { background-position: -250px 0; }
.icon-social.vimeo { background-position: -300px 0; }
.icon-social.tumblr { background-position: -350px 0; }
.icon-social.google { background-position: -400px 0; }

2 个答案:

答案 0 :(得分:0)

我认为最简单的方法是让所有图标显示Inline Block?

.icon-social { display:inline-block; float:left; }

这应该有效:)

答案 1 :(得分:0)

#social div {
  float: left;
  margin-right: 6px;
}

结果:

enter image description here

你也可以显示:浮点数的内联块:左边,结果基本相同。