Silly question, but how do you position the:
  • facebook like button;
  • tweet button;
  • twitter follow button;
  • pin it button?


I have put them all into an <ul id="social">:

HTML Code:
<ul id="social">
	<li><div class="fb-like" data-href="http://concretestairslondon.co.uk/index.php" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-font="lucida grande"></div></li>
	<li><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://concretestairslondon.co.uk/index.php" data-size="large">Tweet</a>
<script>Usual javascript to load the button on my site here</script></li>
	<li><a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @twitter</a>
<script>Usual stuff</script></li>
	<li><a href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fconcretestairslondon.co.uk%2Findex.php&media=http%3A%2F%2Fconcretestairslondon.co.uk%2Findex.php&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a></li>
</ul>
I then have my css as:
Code:
#social {
width: 100%	
}

ul#social li {
display: inline;	
width: 25%;
}
Surely that should work? Page is live at: http://www.concretestairslondon.co.uk/