Scaling horizontal menu items

[nonsensitor]

I would like to provide a scalable horizontal menu. Here's the twist: I want to keep the menu items on a single line for as many 'upscales' as possible. So I basically need 2 solutions:

1) For large-scale viewing, each <li><a> menu item should ideally be "shrinkwrapped" . A marginally acceptable alternative would be an em-based standard width that applies to all menu items.

2) For normal viewing, all <li><a> menu items should be a standard width that totals the full width of the page. For example, if there are 5 menu items, they should each take up 20% of the available space. This should also apply to each increase in font size up to the point where the words would not fit on a single line (even if shrink-wrapped).

Is the question clear? If so, is this possible?

Having done some searches on this forum, via google & W3C, I'm afraid I still couldn't find the answer.

Here's the stripped-down html:

<div id="primarynav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="firstpage.html">First Page</a></li>
        <li><a href="secondpage.html">Second Page</a></li>
        <li><a href="thirdpage.html">Third Page</a></li>
    </ul>
</div>
 

And some CSS:

#primarynav ul li { display: inline; }
#primarynav ul li a { font-size: 1em; width: 5em; float: left; }
/* afraid I can't remember why exactly the float is needed as well as the inline, but I took the float out & it doesn't work...I'm sure it made sense at the time... */