How can I align horizontally the social sharing buttons?

Posted on 2012-08-31
Last Modified: 2012-09-04
Can anyone help to fix these social sharing buttons to be like horizontally aligned properly ? including the FB Count, G+ Count also to be horizontal.

I have done so far like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<style type="text/css">
.social_network {
    position : relative;
    list-style-type : none;
.social_network li {
    float : left;
    border : 1px solid rgba(0,0,0,.1);
    padding : 2px;  
	 display: inline-block; 


  <ul class="social_network">
	<li> <a href="#" target="_blank"><img src="<?php echo base_url();?>images/email.png" alt="Email" title="Email" />Email</a> </li>
	<!--FB -->
    <li> <a name="fb_share" type="box_count" href="">Share</a>
      <script src="" type="text/javascript"></script>
      <!-- FB end-->
    <!--twitter -->
    <li> <a href="" class="twitter-share-button" data-count="horizontal" data-via="logudotcom" data-related="general_tips">Tweet</a>
      <script type="text/javascript" src=""></script>
    <!--twitter end -->
    <!-- Place this tag in your head or just before your close body tag -->
      <script type="text/javascript" src=""></script>
      <!-- Place this tag where you want the +1 button to render -->
      <g:plusone size="tall"></g:plusone>
    <li> <a href="javascript:window.print();" target="_blank"><img src="<?php echo base_url();?>images/print2.png" border="0" alt="Print" title="Print" /> Print </a> </li>


Open in new window

Question by:Loganathan Natarajan
    LVL 42

    Accepted Solution

    You're not going to be able to do this with CSS. The google and facebook buttons are pulled in from javascript and the buttons are created inside an iFrame, which you can't style using CSS.

    You will need to look at the relevant APIs to see the various options.

    With google you have the option of specifying button size - you currently have it set to Tall - try standard:

    <g:plusone size="standard"></g:plusone>

    With facebook, you set the type (button_count):

    <a name="fb_share" type="button_count" href="">Share</a>

    Have a read through their API docs for full information:
    LVL 36

    Author Comment

    by:Loganathan Natarajan
    Could you please suggest or way to do without javascript? I could see many sites having those buttons sharing in same line(horizontal) do they do?
    LVL 42

    Expert Comment

    by:Chris Stanyon
    Re-read my post - it shows you how to set the buttons horizontally.
    LVL 36

    Author Closing Comment

    by:Loganathan Natarajan

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Join & Write a Comment

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now