【问题标题】:css alignment issue with facebook and twitter buttonsfacebook和twitter按钮的css对齐问题
【发布时间】:2014-02-02 02:28:37
【问题描述】:

我不明白为什么 facebook 按钮在下一页顶部未对齐 http://wishd.me/chovy/lists/507f8817a51102a137000001

<div class="social">
    <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-size="medium" data-count="none">Tweet</a>
    <div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>
</div>

facebook 按钮比 twitter 按钮略低。

【问题讨论】:

    标签: css facebook


    【解决方案1】:

    如果您检查 dom,您会看到 twitter iframe 的高度为 20px,而 fb div 的高度为 27px。

    有几种方法可以处理这个问题。我不喜欢上面的两个帖子,因为 .social .iframe 规则也会将 fb iframe 向下移动 4px。另一个是我的意见很混乱。

    你可以这样做:

    .social > iframe { display: inline-block; position: relative; top: 4px; }
    

    所有的解决方案都不是最漂亮的......

    【讨论】:

      【解决方案2】:

      试试

      <div style="float:left ;margin-right:5px;margin-top:4px">
           <iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/tweet_button.1347008535.html#_=1350635993430&amp;count=none&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fwishd.me%2Fchovy%2Flists%2F507f8817a51102a137000001&amp;size=m&amp;text=chovy's%20wishlist%20%C2%BB%20Movies%20-%20Wishd.me&amp;url=http%3A%2F%2Fwishd.me%2Fchovy%2Flists%2F507f8817a51102a137000001" class="twitter-share-button twitter-count-none" style="width: 58px; height: 20px;" title="Twitter Tweet Button" data-twttr-rendered="true"></iframe>
      
      </div>
      

      结果

      【讨论】:

      • 修复它,但有点hacky。我根本不需要修改他们的代码来让它们正确显示。我认为有一条规则级联到 facebook 标记中,这把它搞砸了。
      【解决方案3】:
      .social iframe {
        position: relative;
        top: 4px;
      }
      

      Twitter iframe 稍微向下移动,并且对齐良好。

      附言您的 .social 样式位于 style.css 第 445 行。

      【讨论】:

        猜你喜欢
        • 2012-02-26
        • 2013-02-23
        • 2011-11-07
        • 2011-11-07
        • 1970-01-01
        • 2017-01-06
        • 1970-01-01
        • 1970-01-01
        • 2016-10-09
        相关资源
        最近更新 更多