asked on

How can I align horizontally the social sharing buttons?

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>


<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; 
	
}

</style>

  <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="http://www.facebook.com/sharer.php">Share</a>
      <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
      <!-- FB end-->
    </li>
    <!--twitter -->
    <li> <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="logudotcom" data-related="general_tips">Tweet</a>
      <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </li>
    <!--twitter end -->
    <!-- Place this tag in your head or just before your close body tag -->
    <li>
      <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
      <!-- Place this tag where you want the +1 button to render -->
      <g:plusone size="tall"></g:plusone>
    </li>
	
    <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>
  </ul>



</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Loganathan Natarajan

ASKER

Could you please suggest or way to do without javascript? I could see many sites having those buttons sharing in same line(horizontal) ..how do they do?

Chris Stanyon

Re-read my post - it shows you how to set the buttons horizontally.

Loganathan Natarajan

ASKER

tks