¿Cómo puedo hacer que un esté espaciado uniformemente en el área de contenido en la que existe?

Tengo una lista que estoy usando como una lista de tabs:

 

donde el CSS se define de la siguiente manera:

 #SearchForm ul { list-style: none; padding:0; margin: 15px 0 5px 0; } #SearchForm li { display: inline; background-color: #F6E9D8; margin: 12px 6px 0 0; padding: 6px 0 6px 0; } #SearchForm li a { padding: 0 20px; } 

Esta lista solo ocupa aproximadamente el 90% del ancho disponible en la página, mientras que todo lo demás en la página ocupa el 100% del ancho porque están distribuidos en divs. El espacio disponible para ellos se define en un elemento suministrado por el cliente en

  width: 62.1em 

Básicamente, lo que necesito es conseguir que las tabs se distribuyan de manera uniforme para que ocupen todo el ancho disponible, con el texto / enlace alineado en el centro de cada pestaña. ¿Hay alguna manera de hacer esto?

Pero por supuesto. He armado una demo aquí . El CSS es el siguiente con explicación como comentarios:

 #SearchForm { /* Set width of parent div */ width: 62.1em; } #SearchForm ul { /* Make ul take 100% of its parent's width */ width: 100%; list-style: none; padding: 0; margin: 15px 0 5px 0; } #SearchForm li { /* Float the li's left and give them 20% width (20% * 5 = 100%) */ float: left; width: 20%; /* Make sure no horizontal padding/margin is applied. Since we've set an explicit width on the li, horizontal padding/margins would add to this, making the element greater than 20% width and causing float drop */ margin: 12px 0 0 0; padding: 6px 0; } #SearchForm li a { /* Set the nested links to display block and align their text center */ display: block; text-align: center; /* Here we can safely apply horizontal padding/margins because we haven't explicitly set a width on the element */ margin: 0 6px 0 0; padding: 0 20px; background-color: #F6E9D8; }