如何将这些按钮内联?

时间:2016-04-26 06:31:33

标签: html css share-button

我与社交媒体(Twitter,Facebook,Google +)的分享按钮有点混淆,因为facebook按钮比其他两个按钮低了几个像素。 我有这样的感觉,我通过添加或删除div,margin,padding等来完成我所知道的一切。

这是HTML代码:

<div class="sharebuttons">
  <div class="sharebutton"><div class="fb-share-button " data-layout="button" data-mobile-iframe="false"></div></div>
  <div class="sharebutton"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></div>
  <div class="sharebutton"><div class="g-plus" data-action="share" data-annotation="none"></div></div>
</div>  

我唯一的CSS代码:

.sharebutton{
    display:inline; 
}

结果如下:

enter image description here

3 个答案:

答案 0 :(得分:4)

您需要垂直对齐它们。由于文字在顶部,我建议应用此css:

.sharebutton {
    display: inline-block;
    vertical-align: bottom;
}
这样,所有按钮都会流到行的底部并正确对齐,保持文本在顶部。

答案 1 :(得分:1)

你可以只添加浮点数:左边和一些宽度来寻找你的网站:

.sharebutton {
  display: inline-block;
  float: left;
  width:auto;
}

答案 2 :(得分:0)

.sharebutton {
   display: inline-block;
   vertical-align: top; // or bottom as per your needs
}