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

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 是 block 元素，而 span 是内联元素。由于它是一个 block 元素，因此它被稍微向下推到页面上。