HTML:
<ul>
<li class="socialHeader"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://thedomain">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>
<li>
<div class="g-plusone" data-size="medium"></div>
</li>
</ul>
CSS:
li, ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
.g-plusone, .twitter-share-button {
margin: 0;
padding: 0;
}
Output
How can I get the icons horizontally flush against one another? I've seen in the browser console that the javascript accompanied by each dynamically generated button includes some width properties but I'm not sure how to access them.