Pinterest Pin It 按钮与相邻内容重叠答案

【问题标题】：Pinterest Pin It button overlaps neighbouring contentPinterest Pin It 按钮与相邻内容重叠
【发布时间】：2014-01-27 09:45:59
【问题描述】：

我有一个 Pinterest 按钮，在按钮旁边显示计数。问题是计数显示为position:absolute;，因此它与旁边的按钮重叠，如下所示：

是否有一种优雅的解决方案可以在不增加按钮之间空间的情况下使其不重叠？这是我用来显示按钮的代码（来自 Pinterest Widget Builder）：

<a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fbooks.popublic.com%2Fnotmyuniverse%2F&media=http%3A%2F%2Fbooks.popublic.com%2Fnotmyuniverse%2Fimage%2Fcover.jpg&description=%22Not%20My%20Universe%22%20by%20Z.V.%20Mara" data-pin-do="buttonPin" data-pin-config="beside" data-pin-zero="true" data-pin-color="red"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_20.png" /></a>

【问题讨论】：

我也有同样的问题。你找到解决办法了吗？
我向 Pinterest 支持人员询问了这个问题，他们回答说：“我们目前没有官方方法来解决这个问题。我能想到的唯一解决方法是在按钮周围添加额外的填充自己来补偿计数器。我已经让工程团队的其他人知道了这个问题，以便我们可以永久解决这个问题。”

标签： html web social-networking social pinterest

【解决方案1】：

愿这能解决你的问题。

HTML

<div class="pinit"><a data-pin-config="beside" href="http://pinterest.com/pin/create/button/?url=;media=" data-pin-do="buttonPin"></a>  </div>

css

.pinit a{ 
    background-repeat:no-repeat;
    width:auto!important;
    min-width:40px!important;
}
.pinit span{
    position:relative!important;
    display:block;
    margin-left:42px!important;
    left:0!important
}

【讨论】：

我正在寻找一种解决方案，在这种解决方案中，我不必选择绝对大小，以防 Pinterest 在没有通知的情况下更改它的 API。
是的，我同意，但这只是快速修复，直到我们没有任何真正的解决方案。我用这个工作正常，所以只想分享。
是的，我目前的方法几乎相同。感谢您的意见。

【解决方案2】：

我对此的解决方案是将 Pinterest 按钮放在最后。 IE 最右边。

【讨论】：