Css problem in menu

[khurram123]

I have problem in css setting. I have created three link in header section on right side. with small icons
1. Home 2. Contact us and Site Map.

 <div class="icons"><!--icons starts here -->
                    <ul>
                        <li class="home"><a href="#">Home</a></li>
                        <li class="contact"><a href="#">Contact Us</a></li>
                        <li class="sitemap"><a href="#">Site Map</a></li>                    
                    </ul>
            </div><!--icons ends here -->

CSS Code:

.icons{float:right; width:263px;  border:1px solid #000;}
.icons{float:right; width:263px;}
.icons ul{ list-style-type:none; display:inline; margin:0; padding:0;}
.icons ul li{padding-left:26px; float:left; position:relative; margin-right: 28px; margin-top: 20px; border:1px solid #000;}
.icons ul li a{color:#5d5d5d; text-decoration:none; font-size:12px; padding-top:8px; display:block; }
.icons ul li.home{background:url(img/homeicon.jpg) no-repeat; width:22px; height:20px; }
.icons ul li.contact{background:url(img/contacticon.jpg) no-repeat; width:20px; height:22px;}
.icons ul li.sitemap{background:url(img/sitemap.jpg) no-repeat; width:30px; height:21px;}

Its not working fine. Home is working good but contact us link and sitmap are coming in two lines.
Contact
us

Site
Map

This is how it is howing with icons.

How can i make them in on single line. Plzz help me.

[Taywin]

You have specified the width of each li. The "Contact Us" is much longer than "Home" and that would be wrapped into the specified with (20px). The "Site Map" is also a bit longer than your specified width (30px). Simply increase the width of both .icons ul li.contact and .icons ul li.sitemap to a bit bigger and see the different.

[khurram123]

Thanks for your Feed back.

[mattster]

Thanks for your Feed back.

Please mark solved if @Taywin has fixed it and give him some credit