1

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>

1 Resposta 1

1

Isso é bem simples de fazer utilizando display:flex. Precisa de aplicar essa regra de estilo no elemento pai dos que quer distribuir, e depois define a forma como eles se alinham com a regra justify-content.

No seu caso dá jeito ter:

justify-content:space-around;

Que distribui o espaço à volta dos elementos. Veja como fica:

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

Se tiver 5 elementos funciona na mesma:

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

A forma como os elementos se distribuem é controlada pela regra flex-direction que por defeito é row e faz com que os elementos fiquem todos na mesma linha.

2
  • Muito bom! Só acrescentei width: 100%; nos itens de lista do segundo exemplo para o efeito ficar totalmente igual ao do snippet da pergunta (o link ficar maior que o comprimento do texto).
    – Piovezan
    Commented 18/03/2018 às 16:50
  • @Piovezan Sim tem razão, retirei quando estava a testar e esqueci-me de colocar de novo com a dimensão que interessa.
    – Isac
    Commented 18/03/2018 às 16:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .