Ajustement automatique de la taille des boutons dans le menu

Bonjour à tout le monde,

Je suis en train de me prendre la tête ces jours-ci parce que j'essaie de faire en sorte que, dans le menu principal, les boutons générés soient automatiquement redimensionnés pour remplir l'intégralité du menu.
Pour vous faire une idée de ce dont je parle, voici un premier lien. Ici, le résultat est pas mal (il reste quand même un petit espace à droite, avant la bar de recherche), mais il est pas mal uniquement parce que les mots des boutons sont assez logs pour remplir l'espace.
Si on regarde ce deuxième exemple, ce n'est plus du tout le cas, l'espace entre le dernier bouton et la barre de recherche est bien trop grand.

J'ai fait quelques recherches dans le css et j'y vois ça :

#nav {
		font-size: 13px;	
		background: transparent url(../images/nav-bg.png) no-repeat 0px -1px;
		margin-bottom: 16px;
	}


	#nav ul{
		list-style: none;
		display: block;
		margin: 0;
		padding: 0px;
		float: left;
	}
	
	#nav ul#menu-main-nav, #nav ul.mnav, #nav ul#menu-main {
		float:left;
		width:650px;
		}
	
	#nav ul li{
		font-weight: bold;
		margin:0;
		padding: 0px;
		float: left;
		
		background: url(../images/navdivider.png) no-repeat right top;
	}
	
	#wrapper #nav ul.homebutton li a.home, #wrapper #nav ul.homebutton li a.home:hover{
			background-color: transparent;
			background-position:  21px 5px;
			background-repeat: no-repeat;
			text-indent: -300em;
			width: 25px;
			border-left: none;	
			position:relative;
			z-index: 10;
			padding: 9px 22px 9px 20px;	
		}
		
	#nav ul.homebutton li a.home:hover, #nav ul.homebutton li a.home:active{
		cursor: pointer;
		margin:0;
		border:none;
	}
	#nav ul li a{
		padding: 9px 22px 9px 20px;
		text-decoration: none;
		text-shadow: #ddd 0px 1px 0px;
		color: #000;
		display: block;
	}

Si je décrypte bien le css, il y a en fait trois espaces différents : le bouton "Home" et son icône, un espace vide qui se remplit avec les pages générées par Wordpress et l'espace qui contient la barre espace. C'est donc ce 2e espace qui nous intéresse. Il apparaît qu'il ait un width de 650px et qu'il ait une valeur float:left, afin de "coller" tous les boutons de gauche à droite.
J'ai essayé de mettre un "text-align:center" mais comme vous l'imaginez, ça n'a fait que centrer les boutons en les alignant verticalement, pas top.
Je me demande donc comment je pourrais bien faire pour réaliser un truc qui me semble super simple dans ma tête, mais beaucoup moins en css...

Merci pour votre aide.