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

将元素包装在<li>
为他们添加样式display:inline
忽略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

默认情况下，iFrame是块级元素。你必须进行显示：在CSS中内联。 g：plusone也可能是一个，但我从来没有听说过这个标签。

Answer 5

put padding-top：5px;在第二行的那个。

Answer 6

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

您可以使用Firefox网站管理员工具查看此内容，或尝试将您的网页投放到验证程序（http://validator.w3.org/），以确保没有太多错误。

Answer 7

此代码有效：

    <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>

＃

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

埃里克

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

7 个答案:

＃