如何获得这些按钮内联？

我对社交媒体（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; 
}

，结果是这样的：

来源

2016-04-26 Paul

你有一个div嵌套有造成破坏。你应该可以删除那个'.fb-share-button'，然后把这些属性放到它的父代。 – jbutler483

您可以只添加浮动：左和一些宽度来找你的网站：

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

来源

2016-04-26 06:36:47 Jainam

这工作！非常感谢 – Paul

如果你浮动元素，'display：inline-block'和'width：auto'是完全多余的。 –

奇怪的答案..浮动和内嵌块，当你可以使用一个，为什么两个？ –

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

来源

2016-04-26 06:33:33

您需要将它们垂直对齐。由于文字是在上面，我建议应用此CSS：

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

这种方式，所有按钮将流向线的底部对齐妥善保管文本之上。

来源

2016-04-26 06:34:58 Justinas

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

如何获得这些按钮内联？

回答

相关问题