如何使这些按钮内联？答案

【问题标题】：How do I get these buttons inline?如何使这些按钮内联？
【发布时间】：2016-04-26 06:31:33
【问题描述】：

我对社交媒体（Twitter、Facebook、Google+）的分享按钮有点吃力，因为 facebook 按钮比其他两个按钮低了几个像素。我觉得我尝试了我所知道的一切，通过添加或删除 div、边距、填充等。

这是 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; 
}

结果是这样的：

【问题讨论】：

你有一个嵌套的 div 导致破坏。您应该能够删除 .fb-share-button 并将属性放入其父级中。

标签： html css share-button

【解决方案1】：

您需要垂直对齐它们。由于文本位于顶部，我建议应用此 css：

.sharebutton {
    display: inline-block;
    vertical-align: bottom;
}

这样所有按钮都会流到行的底部并正确对齐，使文本保持在顶部。

【讨论】：

在这种情况下这对我不起作用，我不知道为什么：/但感谢您的回答！

【解决方案2】：

您可以添加 float:left 和一些宽度来寻找您的网站：

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

【讨论】：

display: inline-block 和 width: auto 如果浮动元素是完全多余的。
奇怪的答案.. float 和 inline-block 当你可以使用一个时，为什么要使用两个？

【解决方案3】：

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

【讨论】：