How to distribute the items of a horizontal list independently of their quantity?

Question

The snippet below is working correctly, dividing the navigation bar into four items equally distributed horizontally. Run it to observe. But it is not as I would like: the width field (width) of each item in the list is 25%, And that only works because there are exactly four items on the list. I would like the CSS to maintain the equal distribution of items regardless of the amount of them in the HTML. It is possible?

* {
    border: 0px;
    margin: 0px;
    padding: 0px;
    border-width: 0px;
    outline-width: 0px;
}

nav {
    background-color: #a9eaff;
}

nav ul {
    display: table;
    width: 100%;
}

nav ul li {
    list-style-type: none;
    display: table-cell;
    width: 25%;
    text-align: center;
    font-weight: bold;
}

nav ul li:hover {
    background-color: blue;
    text-color: white;
}

nav ul li a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

nav ul li a:hover {
    color: white;
}

  <nav>
<ul>
  <li><a href="#">Início</a></li>
  <li><a href="#">Ideias</a></li>
  <li><a href="#">Tecnologias</a></li>
  <li><a href="#">Demonstrações</a></li>
</ul>
  </nav>

Answer 1

This is very simple to do using display:flex. You need to apply this style rule to the parent element that you want to distribute, and then you define how they align with the rule justify-content.

In your case it’s handy to have:

justify-content:space-around;

That distributes the space around the elements. See how it looks:

* {
    border: 0px;
    margin: 0px;
    padding: 0px;
    border-width: 0px;
    outline-width: 0px;
}

nav {
    background-color: #a9eaff;
}

nav ul {
    /*display: table; - removido*/
    display:flex; /*flex aqui - novo*/
    justify-content:space-around; /*e distribuição de espaço aqui - novo*/
    width: 100%;
}

nav ul li {
    list-style-type: none;
    /*display: table-cell; - removido
    width: 25%; - removido*/
    text-align: center;
    font-weight: bold;
    width: 100%;
}

nav ul li:hover {
    background-color: blue;
    text-color: white;
}

nav ul li a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

nav ul li a:hover {
    color: white;
}

  <nav>
<ul>
  <li><a href="#">Início</a></li>
  <li><a href="#">Ideias</a></li>
  <li><a href="#">Tecnologias</a></li>
  <li><a href="#">Demonstrações</a></li>
</ul>
  </nav>

If you have 5 elements it works in the same:

* {
    border: 0px;
    margin: 0px;
    padding: 0px;
    border-width: 0px;
    outline-width: 0px;
}

nav {
    background-color: #a9eaff;
}

nav ul {
    display:flex;
    justify-content:space-around;
    width: 100%;
}

nav ul li {
    list-style-type: none;
    text-align: center;
    font-weight: bold;
    width: 100%;
}

nav ul li:hover {
    background-color: blue;
    text-color: white;
}

nav ul li a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

nav ul li a:hover {
    color: white;
}

  <nav>
<ul>
  <li><a href="#">Início</a></li>
  <li><a href="#">Ideias</a></li>
  <li><a href="#">Tecnologias</a></li>
  <li><a href="#">Demonstrações</a></li>
  <li><a href="#">Outro link</a></li>
</ul>
  </nav>

How the elements are distributed is controlled by the rule flex-direction which is by default row and makes the elements all on the same line.