Versuchen Sie es mit einem Flexbox-Navi, das bis zu 5 Elemente und nur 3 Elemente enthält, aber die Breite nicht gleichmäßig auf alle Elemente verteilt.

Geige

Das Tutorial, nach dem ich dies modelliere, ist http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

SASS

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}

<div class="tabs">
  <ul>
    <li class="active" data-tab="1">Pizza</li>
    <li data-tab="2">Chicken Noodle Soup</li>
    <li data-tab="3">Peanut Butter</li>
    <li data-tab="4">Fish</li>
  </ul>
</div>

Es gibt ein wichtiges Bit, das in dem Artikel, auf den Sie verlinkt haben, nicht erwähnt wird flex-basis. Standardmäßig flex-basisist auto.

Aus der Spezifikation :

Wenn die angegebene Flex-Basis automatisch ist, ist die verwendete Flex-Basis der Wert der Hauptgrößeneigenschaft des Flex-Elements. (Dies kann selbst das Schlüsselwort auto sein, das die Größe des Flex-Elements basierend auf seinem Inhalt ändert.)

Jedes Flex-Element hat eine flex-basisGröße, die seiner ursprünglichen Größe entspricht. Von dort aus wird der verbleibende freie Speicherplatz proportional (basierend auf flex-grow) auf die Elemente verteilt. Diese autoBasis ist die Inhaltsgröße (oder die definierte Größe mit widthusw.). Infolgedessen erhalten Elemente mit größerem Text in Ihrem Beispiel insgesamt mehr Platz.

Wenn Sie möchten, dass Ihre Elemente vollständig gleichmäßig sind, können Sie festlegen flex-basis: 0. Dies setzt die Flex-Basis auf 0 und dann wird jeder verbleibende Raum (der der gesamte Raum ist, da alle Basen 0 sind) proportional basierend auf verteilt flex-grow.

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

Dieses Diagramm aus der Spezifikation veranschaulicht den Punkt ziemlich gut.

Und hier ist ein Arbeitsbeispiel mit Ihrer Geige.

Um Elemente mit gleicher Breite mit zu erstellen Flex, sollten Sie das untergeordnete Element Ihres Elements festlegen (flexible Elemente):

flex-basis: 25%;
flex-grow: 0;

Es gibt allen Elementen in Zeile 25% Breite. Sie werden nicht wachsen und eins nach dem anderen gehen.