Question

I’ve setup my social media buttons all on a single line (Twitter, Facebook & Google+).

The problem is that the Google+ button isn’t spacing correctly – it spaces itself about 3x farther than the Twitter & Facebook Button.

I’ve tried changing the padding, but that didn’t help. I thought that maybe the width of the Google+ button was the problem, but I don’t see anything in the code to change the width.

HTML:

<div class="copy_right_social">
<div class="social">
<ul id="social">

<li><a href="https://twitter.com/share" class="twitter-share-button" data-url="https://www.whatever.com" data-via="jimsmith" data-lang="en" data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>

<li><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.whatever.com&amp;send=false&amp;layout=box_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:90px;" allowTransparency="true"></iframe></li>

<!-- Place this tag where you want the +1 button to render. -->
<li><div class="g-plusone" data-size="tall"></div></li>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

</ul>
</div><!-- SOCIAL -->
</div><!-- COPY_RIGHT_SOCIAL -->

CSS:

.copy_right_social {
float: left;
width: 410px;
height: 100px;
margin: 15px 0 0 0;
padding: 0;
border: none;
background-color: #FFF;
}

.social {
list-style-type: none;
list-style-position: inside;
padding: 0;
}

.social li {
display: inline;
text-decoration: none;
padding: 15px 0 0 20px;
float: left;
}

This example on JsFiddle.

Answer 1

The three buttons are not of equal width. That twitter button is 60px wide, the facebook 44px and the gplus 50px.

Therefore you should define individual classes for each one and set the widths, ala:

.social li { float: left; }
.social li.twitter { width: 60px; }
.social li.facebook { width: 44px; }
.social li.gplus { width: 50px; }

Here is a working fiddle with no spacing between them (feel free to add back in however much you like): http://jsfiddle.net/7jC5f/