Nav li auto adjust width if more than one

Something Like that:
Nav li auto adjust width if more than one

For that you need to create first html code.

HTML

<h3>1 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
  </ul>
</div>
<h3>2 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</div>
<h3>3 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<h3>4 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<h3>5 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<h3>6 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<h3>7 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<h3>8 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<h3>9 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<h3>10 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

After that add this CSS code.

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h3 {
  text-align: center;
}
.nav {
  width: 100%;
  float: left;
  text-align: center;
  background: #ccc;
  margin-bottom: 20px;
}
.nav ul {
  list-style: none;
}
.nav ul li {
  float: left;
  padding: 5px;
}
.nav ul li a {
  display: block;
  padding: 5px 10px;
  color: #000;
  text-decoration: none;
  background: #f5f5f5;
}
.nav ul li:not(:last-child) {
  padding-right: 10px;
}
.nav ul li:nth-last-child(1),
.nav ul li:nth-last-child(1) ~ li {
  width: 100%;
}
.nav ul li:nth-last-child(2),
.nav ul li:nth-last-child(2) ~ li {
  width: 50%;
}
.nav ul li:nth-last-child(3),
.nav ul li:nth-last-child(3) ~ li {
  width: 33.333%;
}
.nav ul li:nth-last-child(4),
.nav ul li:nth-last-child(4) ~ li {
  width: 25%;
}
.nav ul li:nth-last-child(5),
.nav ul li:nth-last-child(5) ~ li {
  width: 20%;
}
.nav ul li:nth-last-child(6),
.nav ul li:nth-last-child(6) ~ li {
  width: 16.666%;
}
.nav ul li:nth-last-child(7),
.nav ul li:nth-last-child(7) ~ li {
  width: 14.285%;
}
.nav ul li:nth-last-child(8),
.nav ul li:nth-last-child(8) ~ li {
  width: 12.5%;
}
.nav ul li:nth-last-child(9),
.nav ul li:nth-last-child(9) ~ li {
  width: 11.111%;
}
.nav ul li:nth-last-child(10),
.nav ul li:nth-last-child(10) ~ li {
  width: 10%;
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”wrpKVv” default_tab=”html,result” user=”pradeepanvi”]See the Pen Nav li auto adjust width if more than one by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]