How do you also distribute the items in a horizontal list regardless of their quantity?

Navigation
1

The snippet below is working correctly, dividing the navigation bar into four equally distributed items horizontally. Run it to observe. But it's not what I'd like: The width ( width ) field of each list item is 25% , and this only works because there are exactly four items in the list. I would like CSS to keep the egalitarian distribution of items independent of their quantity in HTML. Is it 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>
    
asked by anonymous 18.03.2018 / 17:32

1 answer

1

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

In your case, you have: 

justify-content:space-around;

That distributes the space around the elements. Here's how: 

* {
    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 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>

The way the elements are distributed is controlled by the flex-direction which by default is row and causes the elements to be all on the same line.

    
18.03.2018 / 17:41
How to have a unique id and then retrieve this id in php page to write to the bank Carousel - arrows as pagination