不能减少喜欢和+1按钮的宽度

Question

我正试图在页面上设置Facebook和Google +1按钮。但是，它们的宽度太大了：

我将它们定义如下：

<table id="plusOneButtons">
    <tr>
        <td id="fbLikeButton"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FLigatures.Net&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21&amp;appId=58053763610" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe></td>
        <td id="googlePlusOneButton"><div class="g-plusone" data-size="medium"></div></td>
        <td id="twitterShareButton"><div><a href="https://twitter.com/share" class="twitter-share-button" data-via="LigaturesNet">Tweet</a></div></td>
    </tr>
</table>

CSS是：

#fbLikeButton {
    width: 100px;
    background: red;
}

#googlePlusOneButton {
    width: 100px;
    background: greenyellow;
}

#twitterShareButton {
    width: 100px;
    background: aliceblue;
}

如何设置合适的宽度？我已经检查了这个question，但解决方案不起作用。

Answer 1

指定iframe

的宽度

 <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FLigatures.Net&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21&amp;appId=58053763610" scrolling="no" frameborder="0" width="130px" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>

DEMO

Answer 2

更新您的CSS并为所有ID display: inline-block;

添加以下属性

#fbLikeButton {
width: 100px;
background: red;
display: inline-block;} 

Answer 3

虽然已为<td>分配了宽度，但其中的元素具有更大的宽度并占用更多空间。 将ID标记移至<iframe>和<div>以解决此问题：

<table id="plusOneButtons">
    <tr>
        <td><iframe id="fbLikeButton" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FLigatures.Net&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21&amp;appId=58053763610" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe></td>
        <td><div id="googlePlusOneButton" class="g-plusone" data-size="medium"></div></td>
        <td><div id="twitterShareButton"><a href="https://twitter.com/share" class="twitter-share-button" data-via="LigaturesNet">Tweet</a></div></td>
    </tr>
</table>

Answer 4

事实证明Izzy（现已删除）解决方案有效（即设置display: inline-block;）