Como distribuir uniformemente itens de menu com CSS quando a largura e a quantidade não são conhecidas?

Eu li muito sobre distribuir uniformemente elementos usando css, mas cada solução que eu encontrei requer que você conheça e defina a largura e / ou o número de elementos sendo distribuídos.

Eu tenho um contêiner que é de uma largura fixa - dentro aqui poderia ser qualquer número de elementos li de uma largura automática que precisam ser distribuídos uniformemente através do elemento pai da esquerda para a direita.

Aqui está a minha marcação - exceto que pode haver qualquer número de abas com qualquer texto de comprimento.

<code><ul class="tabs">
     <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
     <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
     <li class="tab " id="tab-3"><span class="tab-title">Tab 3</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>
</code>

Então, mesmo distribuição com css quando o número de elementos e largura é dinâmico - pode ser feito?

Parece uma coisa tão óbvia a querer fazer - Damn CSS!

questionAnswers(2)

yourAnswerToTheQuestion