How to Display Horizontally

I have the following in my post footer. How can I display the icons horizontally? I tried display:inline; but no luck.

<div class="share"><h3>Share</h3>
<ul>
<div class="twitter">
<li><p><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="jakeocallaghan">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></p></li>
</div>
<div class="facebook">
<li><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fjakeocallaghan.com&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe></p></li></div>
<li><!-- Place this tag where you want the +1 button to render -->
<glusone size="tall" href="http://jakeocallaghan.com"></glusone></p></li>
</ul>
</div>

 

First of all, a <div> directly inside a <ul> is not allowed. So new code:

<div class="share"><h3>Share</h3>
<ul>
<li>
<div class="twitter">
<p><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="jakeocallaghan">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></p>
</div>
</li>
<li>
<div class="facebook">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fjakeocallaghan.com&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe></p>
</div>
</li>
<li><!-- Place this tag where you want the +1 button to render -->
<glusone size="tall" href="http://jakeocallaghan.com"></glusone></p>
</li>
</ul>
</div>

HTML:

Here's the css to make them align horizontally

div.share ul {
   overflow: hidden;
}

div.share ul li {
   float: left;
   margin: 10px 10px 0 0;
}

Code (markup):

I hope it helps

 

Hey, tried the code, but it didn't align them horizontally. D:
.

 

Check this out: http://jsfiddle.net/psyFL/
It's working here :S

 

Yeah no idea why it doesn't work. I copied and pasted the html into a widget then pasted the CSS to my custom.css file.

 

can you show me your website? I will check it out and will see what can be done..

 

Awesome, here's a post. I am displaying them at the bottom. I'm using wordpress and thesis.

 

Actually, according to your code on that site, the css should be:

div.footer_items div.textwidget div.buttbutt  ul {
   overflow: hidden;
}

div.footer_items div.textwidget div.buttbutt ul li {
   float: left;
   margin: 10px 10px 0 0;
}

Code (markup):

 

Sorry, that still doesn't work D:

 

is the problem persist ??

what about give the link in a "block" and display it "inline"

<div id="container">
 <div class="social">
   the FB code here
 </div>
<div class="social">   the TWITTER code here </div></div>

#container{

}

.social {
 display:block-inline;
}

or 

.social { display:block;
 float:left;}

or perhaps just

.social { display:block;}

well, hope that could help you out..