无法减小点赞和 +1 按钮的宽度答案

【问题标题】：Can't reduce the width of like and +1 buttons无法减小点赞和 +1 按钮的宽度
【发布时间】：2014-08-13 10:03:07
【问题描述】：

我正在尝试在页面上设置 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，但解决方案不起作用。

【问题讨论】：

标签： html css facebook-iframe

【解决方案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

【讨论】：

【解决方案2】：

更新您的 CSS 并为所有 ID 包含以下属性 display: inline-block;

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

【讨论】：

我刚刚意识到你对这个问题的回答，并为未来的读者取消了我的帖子:)
谢谢，不胜感激