Html – how to make all list items stretch to full width of a container

csshtml

I' trying to create a nav that's responsive but I can't get then menu items to stretch itself relative to the container.

What's the most effective modern method of making all elements auto fit themselves full width of a container?

nav {
  border: solid 1px #000;
  width: 700px;
}

ul {
  width: 100%;
  list-style-type: none;
  width: 100%;
}

ul li {
  padding: 25px;
  display: inline-block;
  background: #000;
  color: #fff;
}
<nav>
  <ul>
    <li><a href="#">a</a></li>
    <li><a href="#">b</a></li>
    <li><a href="#">c</a></li>
    <li><a href="#">d</a></li>
    <li><a href="#">e</a></li>
    <li><a href="#">f</a></li>
  </ul>
</nav>

Best Solution

I would use CSS tables as follows.

For ul, use display: table and zero out the margin and padding, and set width to 100%.

For ul li, use display: table-cell.

The table cells will adjust themselves to the width of the parent in a reasonable fashion taking into account the width of the link text/labels.

Note: I assumed that you want the links to be inline such that all the links fill up the width, as opposed to a single link taking up 100% of the width. Otherwise, change display: inline-block to display: block for the li elements, but since that is too obvious, I assumed that you wanted a horizontal layout.

nav {
  border: solid 1px #000;
  width: 700px;
}
ul {
  width: 100%;
  list-style-type: none;
  display: table;
  margin: 0;
  padding: 0;
}
ul li {
  padding: 25px;
  display: table-cell;
  background: #000;
  color: #fff;
}
<nav>
  <ul>
    <li><a href="#">a</a></li>
    <li><a href="#">b</a></li>
    <li><a href="#">c</a></li>
    <li><a href="#">d</a></li>
    <li><a href="#">e</a></li>
    <li><a href="#">f</a></li>
  </ul>
</nav>