CSS - horizontal menu and each items spacing

[neicedover1982]

I have created many horizontal menus using the UL.

<ul>
<li>menu one</li>
<li>menu one</li>
<li>menu one</li>
<li>menu one</li>
...
</ul>

This one client I have is racking my brain. They have a site that is translated into 14 languages and there is a menu designed at the top of the page. It has 7 items in it. All is well accept if the menu is in Japanese it is much smaller (smaller words ect) then in English.

I would like it (and so would the client) if the menu items expanded or contracted to fit the space. We have a width of 700px. If the menu is in Japanese, we would like the spacing around each menu items to expand so the menu does not end up with all this white space on each side (its centered). I dont want to code different styles for each language to set the size.

Example;

English: |--one--|--two--|--three--|--four--|--five--|
Japanese: |---on---|---to---|---thr---|---fr---|---fi---|

Does anyone know how to get the individual menu items to expand to fit evenly across the 700px menu space.

Thank you

[the182guy]

Here's one way, using floated list items and block anchor tags with a fixed width. This way will ensure each item is the same width.

<style type="text/css">

.nav
{
	list-style-type:none;
}
.nav li
{
	float:left;
	text-align:center;
}
.nav li a
{
	display:block;
	width:100px;
}

</style>

<ul class="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Home</a></li>
	<li><a href="#">Contact Us</a></li>
</ul>

You could also do it by putting left and right padding on each list item. But that would not make each item the same width.