html - 无法减少喜欢和 +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