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

如果您看到下面的附件，则三个共享按钮的顶部边距不会相同。 Tweet按钮没有保持一致性，它比另外两个稍微高一点。我怎样才能让他们所有的人离开顶端？如何在同一行上对齐html元素

的代码我的工作：

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

来源

2017-07-04 Jaf-2017

它可以像这样

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

来源

2017-07-04 10:44:19 Tik

嗨，谢谢。有用。其实，我以前从来没有拿出过弯方向的物业。我也会检查完整的指南。 –

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

.your_icons { 
    vertical-align:top; 
}

来源

2017-07-04 10:40:56 Lindow

没有'display：table-cell'，它无法正常工作。 – dsb

你可以使用

float:left;和个人margin和padding在CSS每个社会DIV

或绝对位置使用Flex-中的这些元素

来源

2017-07-04 10:42:07 dsb

它可能为你工作..

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

来源

2017-07-04 10:48:59

将一个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}

请更正相应的利润来纠正你的情况。

来源

2017-07-04 10:53:30 JPA

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

回答

相关问题