Question

如果您看到下面的附件，则三个共享按钮的顶部边距不同。推文按钮没有保持一致性，它比其他两个略高。如何让所有这些都与顶部保持距离？

我正在处理的代码：

                            <h2 class="title">Share this blog</h2>

                            <div class="fb-share-button" data-href="http://alfa-blog.com/"
                                 data-layout="button_count" data-size="large" data-mobile-iframe="true">
                                <a class="fb-xfbml-parse-ignore" target="_blank" 
                                   href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Falfa-blog.com%2Findex.html&amp;src=sdkpreparse">Share</a>
                            </div>

                            <a href="https://twitter.com/share" 
                               data-size="large"
                               class="twitter-share-button" data-show-count="false">Tweet</a>

                            <div class="g-plus" data-action="share" data-height="24" data-href="http://alfa-blog.com/"></div>

Answer 1

使用flex-box可以像这样完成

<div class="container">
   <div class="fb-share-button" data-href="http://alfa-blog.com/"
      data-layout="button_count" data-size="large" data-mobile-iframe="true">
      <a class="fb-xfbml-parse-ignore" target="_blank" 
         href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Falfa-blog.com%2Findex.html&amp;src=sdkpreparse">Share</a>
   </div>
   <a href="https://twitter.com/share" 
      data-size="large"
      class="twitter-share-button" data-show-count="false">Tweet</a>
   <div class="g-plus" data-action="share" data-height="24" data-href="http://alfa-blog.com/"></div>
</div>

CSS

.container{
    display: flex;
    flex-direction: row;
    align-items: flex-start
    }

这是一个非常好的指南 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

由于你的css丢失，我会假设你使用display:inline-block;，你可能忘了包括：

.your_icons {
    vertical-align:top;
}

Answer 3

您可以使用

float:left;以及每个社会div的css中的个别边距和填充

或这些元素的绝对位置

Answer 4

它可能对你有用..

.social-holder {width: 100%;}
.social-holder * {display: inline-block; vertical-align: top; padding: 0px; margin: 0px;}

<h2 class="title">Share this blog</h2>
<div class="social-holder">
<div class="fb-share-button" data-href="http://alfa-blog.com/"
data-layout="button_count" data-size="large" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore" target="_blank" 
href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Falfa-blog.com%2Findex.html&amp;src=sdkpreparse">Share</a>
</div>

<a href="https://twitter.com/share" 
data-size="large"
class="twitter-share-button" data-show-count="false">Tweet</a>

<div class="g-plus" data-action="share" data-height="24" data-href="http://alfa-blog.com/"></div>

</div>

Answer 5

将相应的按钮代码放在div元素中，该元素用作掩码。像这样：

<h2 class="title">Share this blog</h2>

<div class="socialbtn socialbtn-facebook">
  <div class="fb-share-button" data-href="http://alfa-blog.com/" data-layout="button_count" data-size="large" data-mobile-iframe="true">
    <a class="fb-xfbml-parse-ignore" target="_blank" href="[address]">Share</a>
  </div>
</div>

<div class="socialbtn socialbtn-twitter">
  <a href="https://twitter.com/share" data-size="large" class="twitter-share-button" data-show-count="false">Tweet</a>
</div>

<div class="socialbtn socialbtn-googlePlus">
  <div class="g-plus" data-action="share" data-height="24" data-href="http://alfa-blog.com/"></div>
</div>

使用CSS代码：

.socialbtn {display:inline-flex;height:25px;width:auto;overflow-y:hidden}
.socialbtn-googlePlus {margin-top:-10px}
.socialbtn-twitter {margin-top:0px}
.socialbtn-facebook {margin-top:-5px}

请更正相应的边距以纠正您的情况。

Answer 6

从另一个页面简单地链接锚点

<a href="index.html#services">Services</a>

如何在同一行上对齐html元素

6 个答案: