css - 无法在同一行显示 Google+ 和 Facebook Like

Question

在过去的几个小时里，我一直在努力解决这个问题，但它不起作用。

我想在一行上显示 Facebook Like 框、Twitter 和 Google +，但它将它们显示在不同的行上，只是正确显示 Facebook Like 框。

这是我正在使用的代码：

<div class="likefooter">                    

<iframe src="http://www.facebook.com/plugins/like.php?href={$my_base_url}{$story_url}& amp;layout=standard;&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;  overflow:hidden; width:450px;"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<g:plusone size="medium" annotation="inline"></g:plusone>

        </div>  

CSS 文件在这里： http: //www.box.net/shared/2agu4dy10mb4y3pj7e1m

Answer 1

请试试

    <div class="likefooter">                    

    <div style="float:left;"><iframe src="http://www.facebook.com/plugins/like.php?href={$my_base_url}{$story_url}& amp;layout=standard;&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;  overflow:hidden; width:450px;"></iframe></div>  

    <div style"float:left;"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>  

   <div style="float:left;"><g:plusone size="medium" annotation="inline"></g:plusone></div>  

     </div>  

Answer 2

1. 将元素包裹在<li>
2. 风格他们display:inline
3. 省略标签中的data-width属性。<div class="fb-like">

CSS：

ul.social { list-style: none outside none; }
ul.social > li { display:inline; }

html:

<ul class="social">
  <li>
    <div id="fb-root"></div>
    <script>{{ facebook SDK script }}</script>
    <div class="fb-like" data-href="{{ your URL }}" data-send="false" data-layout="button_count"  data-show-faces="false"></div>
  </li>
  <li>
    <{{ twitter button }}>
    <script>{{ twitter javascript }}</script>
  </li>
</ul>

Answer 3

解决方案可能要简单得多——Facebook 按钮的默认宽度是 250，打开 html 并将其缩小到 75 左右。

Answer 4

如果 CSS 调整无助于确保您的文档没有以怪癖模式呈现。有时怪异的渲染模式会导致 +1 按钮显示在下一行。

您可以使用 Firefox 网站管理员工具检查这一点，或尝试将您的页面放入验证器 (http://validator.w3.org/) 以确保没有太多错误。

Answer 5

iFrame 默认是块级元素。您必须在 CSS 中创建 display:inline 。g:plusone 可能也是其中之一，但我从未听说过那个标签。

Answer 6

此代码有效：

    <table cellpadding="4" style="width: auto !important; float: none !important; margin: 8px 0;">
                <tr>
<td><img src="http://gnosisarts.com/home/images/fancy_g2.jpg" width="75" border="0" alt="Gnosis Media Group Internet PR Firm" /></td>
                    <!-- Google +1 Section Starts -->
                    <td>
                        <g:plusone size="tall" href="http://gnosisarts.com/home/Internet_PR"></g:plusone>
                        <script type="text/javascript">
                            (function() {
                                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                                po.src = 'https://apis.google.com/js/plusone.js';
                                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                            })();
                        </script>
                    </td>
                    <!-- Google +1 Section Ends -->

                    <!-- Twitter Button Section Starts -->
                    <td>
                        <!-- async trick from http://techoctave.com/c7/posts/40-xhtml-strict-tweet-button-and-facebook-like-button -->
                        <script type="text/javascript">
                        //<![CDATA[
                        (function() {
                                document.write('<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="gnosisarts" data-url="http://gnosisarts.com/home/Internet_PR">Tweet</a>');
                                var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
                                s.type = 'text/javascript';
                                s.async = true;
                                s.src = 'http://platform.twitter.com/widgets.js';
                                s1.parentNode.insertBefore(s, s1);
                        })();
                        //]]>
                        </script>
                    </td>
                    <!-- Twitter Button Section Ends -->

                                        <!-- LinkedIn Button Section Starts -->
                    <td>
                        <script type="text/javascript">
                        //<![CDATA[
                        (function() {
                                var e = document.createElement('script');
                                e.type="text/javascript"; e.async = true;
                                e.src = 'http://platform.linkedin.com/in.js';
                                document.getElementsByTagName('head')[0].appendChild(e);
                        })();
                        //]]>
                        </script>
                        <script type="IN/Share" data-url="http://gnosisarts.com/home/Internet_PR" data-counter="top"></script>
                    </td>
                    <!-- LinkedIn Button Section Ends -->

                    <!-- Like Button Section Starts -->
                    <td>
                        <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fgnosisartsmediagroup&amp;send=false&amp;layout=box_count&amp;width=65&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:65px; height:65px;" allowTransparency="true"></iframe>
                    </td>
                    <!-- Like Button Section Ends -->

            </tr>
            </table>

#

只需将社交分享 URL 和其他参数相应地更改为您自己的网站。

埃里克

Answer 7

放置填充顶部：5px；在第二行的那个。