CSS Alignment of <li> [duplicate] - css

Question

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Formatting an <li> element within a <div>
The facebook and twitter elements are not aligned. I want them to be positioned perfectly, one above the other. Please can you help?
Here's my code:
#floating-box {
width: 65px;
height:auto;
background-color: #484848;
margin: 54px 10px 0px 623px;
position:absolute;
z-index:1;
text-align: justify;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-right: 1px solid #484848;
}
.social {
position : relative;
list-style-type : none;
margin-left: 2px;
}
.social li a {
float: left;
padding: 1px 5px 5px 0px;
margin: 0px 0px 3px 0px;
display: inline;
}
The HTML that uses this CSS is:-
<div id="floating-box">
<img src="likeusnow.jpg" />
<ul class="social"><!-- Facebook Like/Share Button -->
<li><a name="fb_share" type="box_count" rel="nofollow" share_url="http://www.mysite.com"></a>
</li>
<li>
Tweet
</li>
</ul>

Answer 1

try display: inline-block; instead

Answer 2

Ok I am making a lot of assumptions on this one.
Assumptions
You are using the vertical Facebook share (which has been deprecated, so I'm demonstrating with the Facebook Like Button)
Your are using the similarly styled Twitter share, also with the vertical count.
This is supposed to be a modal dialog that pops up in the middle of the screen.
The image "likeusnow.jpg" is just the text "Like Us Now"
I'd float the <li> elements rather than the <a>'s. Styling the <a>'s will not matter since their content is an <iframe>. It's the fixed width of the div that is getting you into trouble. While the buttons are supposed to be floated left, there is not enough room and the Twitter button is being bumped below the Facebook one.
CSS:
#floating-box {
position:absolute;
background-color: #484848;
margin: 54px 10px 0px 623px;
z-index:1;
text-align: justify;
border: 1px solid #000;
border-right: 1px solid #484848;
padding: 15px;
}
.social {
position: relative;
list-style: none;
margin-left: 2px;
padding: 0;
}
.social li {
float:left;
margin-left: 10px;
}
I made a demo using jsFiddle and inserted placeholder Facebook Like and Twitter Share plugins here.