Leave options in the size of the menu total

Navigation
3

I'm trying to leave the options of a menu that I have distributed according to the total size of the menu, I've been trying some possibilities, including in a post right here, but without success.

The example site I have is: Site Example

My code looks like this: 

        <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;
}

One of my attempts was to give display: table; to ul and display:table-cell; to li, but I could not, unfortunately the site is not yet in the air, but what I have locally can be seen by this image:

    
asked by anonymous 16.12.2015 / 21:37

2 answers

2

I was able to resolve by following the guidelines of this site: link

The settings applied to my example were as follows: 

nav {
    width: 100%;
    background: #113066;
}

nav ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
    float: left;
    text-align: center;
    width: 16.6667%; /* fallback for non-calc() browsers */
    width: calc(100% / 6);
}

The code that looked like this: 

<div class="col-md-8">

It looks like this: 

<div class="col-md-12">

In the example above, calc () was used with percentages for six columns for an optimized result, thanks to everyone for the tips.

    
17.12.2015 / 14:24
-1

Your CSS should look like this: 

ul {

    display:flex;    
    flex-flow: row nowrap;
    justify-content:space-between;    
}

li {

    flex-grow:1; /* SE PREFERIR TENTE ISSO TAMBÉM*/
}

See an example at: link

    
09.06.2016 / 06:12
How to Place Image on the X Axis Is there an object recognition framework for Android? [closed]