Question

我正在尝试将Google Plus One和其他社交媒体按钮内联在一起。出于某种原因，Google Plus按钮会将其向下移动几个像素。它说有一个p标签将它们分开，但代码中没有p标签。 Google Plus代码有自己的div标签，但我不知道如何将其与其他按钮对齐。我正在使用Wordpress。

有没有更好的方法来对齐这些？

<iframe style="border: none; overflow: hidden; width: 52px; height: 20px;" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjrbweddings&amp;width=100&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35" width="300" height="150" frameborder="0" scrolling="no"></iframe><iframe style="border: none; overflow: hidden; width: 60px; height: 20px;" src="//www.facebook.com/plugins/share_button.php?href=http%3A%2F%2Fjrbweddings.com%2Fleena-joel&amp;layout=button" width="300" height="150" frameborder="0" scrolling="no"></iframe><a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" alt="" /></a><script src="//assets.pinterest.com/js/pinit.js" async="" defer="defer" type="text/javascript"></script> <a class="twitter-share-button" href="https://twitter.com/share" data-text="Check out this Wedding Video!" data-related="jrbweddings" data-count="none">Tweet</a><script>// <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); // ]]></script><script src="https://apis.google.com/js/platform.js" async="" defer="defer"></script><div class="g-plusone" data-align="right" data-size="medium" data-annotation="none"></div><div align="right">Wedding Photographer: <a href="http://www.giomoralesphotography.com/">Gio Morales</a></div>

我希望它看起来但需要google plus的示例：

<p class="split-para">
<iframe style="border: none; overflow: hidden; width: 52px; height: 20px;" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjrbweddings&amp;width=100&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35" width="300" height="150" frameborder="0" scrolling="no"></iframe>
<iframe style="border: none; overflow: hidden; width: 60px; height: 20px;" src="//www.facebook.com/plugins/share_button.php?href=http%3A%2F%2Fjrbweddings.com%2Fleena-joel&amp;layout=button" width="300" height="150" frameborder="0" scrolling="no"></iframe>
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark">
    <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" alt="" />
</a>
<script src="//assets.pinterest.com/js/pinit.js" async="" defer="defer" type="text/javascript"></script>
<a class="twitter-share-button" href="https://twitter.com/share" data-text="Check out this Wedding Video!" data-related="jrbweddings" data-count="none">Tweet</a>
<script>// 
    <![CDATA[!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');// ]]>
</script>
<span>Wedding Photographer: 
    <a href="http://www.giomoralesphotography.com/">Gio Morales</a>
</span>

我发现这个jQuery代码有效，但它会禁用页面上的插件和“婚礼摄影师”文本，这是正确的：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $("iframe[src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjrbweddings&width=100&layout=button&action=like&show_faces=false&share=false&height=35']").unwrap();

Answer 1

更改

<div class="g-plusone" data-align="right" data-size="medium" data-annotation="none"></div>

到

<span class="g-plusone" data-align="right" data-size="medium" data-annotation="none"></span>

应该可以工作，因为div是一个块元素，而span是一个内联元素。因为它是一个块元素，所以它被推下了一点。

无法使Google Plus与其他社交媒体按钮保持一致

1 个答案: