How do I get these buttons inline?

Question

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:

you have a nested div there causing havoc. you should be able to remove that `.fb-share-button` and place the attributes into its parent instead. — jbutler483, Apr 26 '16 at 10:07

score 4 · Answer 1 · answered Apr 26 '16 at 06:34

4

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.

answered Apr 26 '16 at 06:34

Justinas

41,402
5
66
96

This didn't work for me in this case, I don't know why :/ but thanks for you answer! – Paul Apr 26 '16 at 06:44

score 1 · Accepted Answer · answered Apr 26 '16 at 06:36

1

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

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

answered Apr 26 '16 at 06:36

Jainam

2,590
1
9
18

2

`display: inline-block` and `width: auto` are completely superfluous if you float the element. – Chris Spittles Apr 26 '16 at 06:59
Strange answer.. float and inline-block when you can use one, why two? – Leo the lion Apr 26 '16 at 07:15

score 0 · Answer 3 · answered Apr 26 '16 at 06:33

0

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

answered Apr 26 '16 at 06:33

Mohammad Usman

37,952
20
92
95

How do I get these buttons inline?

3 Answers3