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.