Estou tentando deixar as opções de um menu que tenho distribuídas de acordo com o tamanho total do menu, estive tentando algumas possibilidades, inclusive em um post aqui mesmo, mas sem sucesso.
O site que tenho como tomada de exemplo é esse: Site Exemplo
O meu código está assim:
<div class="col-md-8">
<!-- NAVEGAÇÃO PRINCIPAL -->
<div class="flexnav-menu-button" id="flexnav-menu-button">Menu</div>
<nav>
<ul class="nav nav-pills flexnav" id="flexnav" data-breakpoint="800" name="flexnav">
<li><a href="index.php">INÍCIO</a></li>
<li><a href="missao.php">MISSÃO E VISÃO</a></li>
<li><a href="equipe.php">QUEM SOMOS </a></li>
<li><a href="treinamentos.php">TREINAMENTOS</a></li>
<li><a href="eventos.php">EVENTOS</a></li>
<li><a href="contato.php">CONTATOS</a></li>
</ul>
</nav>
<!-- FIM NAVEGAÇÃO -->
</div>
</div>
O css
:
.nav { margin-bottom: 0; padding-left: 0; list-style: none; } .nav > li { position: relative; display: block; display:table-cell; } .nav > li > a { position: relative; display: block; padding: 10px 15px; } .nav-pills > li { float: left; } .nav-pills > li > a { border-radius: 4px; } .nav-pills > li + li { margin-left: 2px; }
Umas das minhas tentativas foi dar display: table;
ao ul e display:table-cell;
ao li, mas não consegui, infelizmente o site ainda não está no ar, mas o que tenho localmente pode ser visto por essa imagem: