css float right space

anyone know how to fix this! on 'Get In Touch button'

it works find in another browser except IE7;

HTML:

<NAV>
    <UL>
        <LI><a href="#">Home</a>开发者_如何学JAVA;</LI>
        <LI><a href="#">Branding</a></LI>
        <LI><a href="#">About</a></LI>
        <LI><a href="#">Get In Touch</a></LI>
    </UL>
</NAV>

CSS:

nav { float:right;}
nav ul { margin:0px; padding:0px; }
nav ul li { float:left; }
nav ul li { display:block; background:#ccc; padding:5px; margin-left:5px;}

---

Add white-space:nowrap to the nav ul li CSS rule.

About the white-space property: http://vidasp.net/CSS-white-space-property.html

---

You may need to explicitly set width on the list and/or nav container.

This is quite common in IE7 and down, where the dumb browser needs to be told there's room allotted for the content.

---

nav ul li { display:block; background:#ccc; padding:5px; margin-left:5px; width: auto; }

Add in that width: auto; - see if that helps.

Neuro

---

use

clear: right; float:right;