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

Question

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>

Answer 1

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>

Answer 2

let's say that effective is in the eye of the beholder, but flexbox is quite modern:

nav { display: flex; border: solid 1px #000; width: 700px; }
ul { display: flex; flex-grow: 1; width: 100%; padding: 10px;
     list-style-type: none; }
ul li { flex-grow: 1; padding: 25px; margin: 10px;
        text-align: center; background: #000; color: #fff; }

see fiddle: http://jsfiddle.net/4dxkk5wr/18/

and this resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

and have fun!

Answer 3

If you really want the most modern solution, you could try flexbox layout: http://jsfiddle.net/4dxkk5wr/15/

ul { width: 100%; list-style-type: none; display: flex; padding: 0; }
ul li { width: 100%; padding: 25px; box-sizing: border-box; background: #000; color: #fff; flex-wrap: nowrap; }