如何獲得這些按鈕內聯？

我對社交媒體（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

如何獲得這些按鈕內聯？

回答

相關問題