O snippet abaixo está funcionando corretamente, dividindo a barra de navegação em quatro itens igualmente distribuídos na horizontal. Execute-o para observar. Porém não está como eu gostaria: o campo largura (width
) de cada item da lista é 25%
, e isso só funciona porque há exatamente quatro itens na lista. Gostaria que o CSS mantivesse a distribuição igualitária dos itens independente da quantidade dos mesmos no HTML. É possível?
* {
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>