Aligning social media sharing buttons to look nice together

I just put back the social sharing buttons to my home page and they look really te开发者_JS百科rrible together :)

You can take a look at it here on the bottom of the page: http://www.comehike.com

How do people usually make them fit so natural together? Mine look so disordered and unprofessional. Is there anything that can be done with styling?

Thanks!

Looking at your code you'll likely have to add individual classes to each one, as they are all in different elements. There are a few approaches, absolute positioning, display:inline but I'd recommend floats

add a ul element and each of your 'share buttons' as an li child element of that ul

<ul class='shareLinks'>
<li>facebook here</li>
<li>twitter here</li>
</ul>

then your css can look something like this

ul.shareLinks { overflow: auto; }
ul.shareLinks li { list-style: none; float: left; margin-right: 5px; }

you can obviously edit the css how ever you wish, the main point is the float: left the overflow: auto; on the ul is a fix for the floated elements not having a real height.