如何在同一行上對齊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元素

回答

相關問題