CODEWITHSUNDEEP
htmlcssshare-button
Paul
Paul

Reputation: 57

How do I get these buttons inline?

I'm struggeling a bit with the sharebuttons for social media (Twitter, Facebook, Google+) because the facebook button is a few pixels more down than the other two. I have the feeling I tried everything in my knowledge, by adding or removing divs, margin, padding etc.

This is the HTML code:

<div class="sharebuttons">
  <div class="sharebutton"><div class="fb-share-button " data-layout="button" data-mobile-iframe="false"></div></div>
  <div class="sharebutton"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></div>
  <div class="sharebutton"><div class="g-plus" data-action="share" data-annotation="none"></div></div>
</div>

And the only CSS code from my part:

.sharebutton{
    display:inline; 
}

And the result is this:

enter image description here

Upvotes: 0

Views: 110

Answers (3)

Jainam
Jainam

Reputation: 2660

You can add just float:left and some width looking for your site:

.sharebutton {
  display: inline-block;
  float: left;
  width:auto;
}

Upvotes: 1

Justinas
Justinas

Reputation: 43565

You need to vertically align them. Since text is on top I suggest apply this css:

.sharebutton {
    display: inline-block;
    vertical-align: bottom;
}

this way all buttons will flow to bottom of line and align properly keeping text on top.

Upvotes: 4

Mohammad Usman
Mohammad Usman

Reputation: 39392

.sharebutton {
   display: inline-block;
   vertical-align: top; // or bottom as per your needs
}

Upvotes: 0

Related Questions