Eu gostaria de estender 6 itens de navegação uniformemente em um contêiner de 900px, com uma quantidade uniforme de espaço em branco no meio. Por exemplo...

---| 900px Container |---

---| HOME    ABOUT    BASIC SERVICES    SPECIALTY SERVICES    OUR STAFF    CONTACT US |---

Atualmente, o melhor método que posso encontrar para fazer isso é o seguinte:

nav ul {
  width: 900px; 
  margin: 0 auto;
}

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 150px;
}

O problema com isso é duas vezes. Antes de tudo, isso não justifica realmente, mas espalha as tags li de maneira uniforme por toda a tag ul. Criando um espaço em branco desigual entre itens de menu menores como "HOME" ou "SOBRE" e itens maiores como "BASIC SERVICES" .

O segundo problema é que o layout é interrompido se um item de navegação for maior que 150px, o que é o SPECIALTY SERVICES - mesmo que haja espaço mais do que suficiente para toda a navegação.

Alguém pode resolver isso para mim? Venho vasculhando a web em busca de soluções, e todas elas parecem estar vazias. CSS / HTML somente se possível ...

Obrigado!

ATUALIZAÇÃO (29/7/13): Usar célula de tabela é a melhor maneira moderna de implementar esse layout. Veja a resposta de felix abaixo. otable cell propriedadefunciona em 94% dos navegadores atualmente. Você terá que fazer algo sobre o IE7 e abaixo, mas, caso contrário, deve estar ok.

ATUALIZAÇÃO (30/7/13): Infelizmente, há um bug no webkit que afeta isso se você estiver combinando esse layout com as Consultas de mídia. Por enquanto, você terá que evitar alterar a propriedade 'display'.Consulte Bug do Webkit.

ATUALIZAÇÃO (25/7/14): Existe uma solução melhor para isso abaixo agora envolvendo alinhamento de texto: justificar. Usar isso é mais simples e você evitará o bug do Webkit.