0

Pessoal tou fazendo um menu simples horizontal e dividi as colunas em porcentagem so que a ultima coluna não esta quebrando a linha. Preciso do menu desta forma pois ele será responsivo.

HTML e CSS

nav ul {
    padding:0px;
    margin:0px;
    list-style:none;
    height: 48px;
    width: 100%;
}

nav ul li {
    display:  inline;
}

nav ul li a {
    /*padding: 2px 22px;*/
    padding: 0;
    width: 11%;
    display: inline-block;
    text-decoration: none;
    color: #664232;
    text-align: center;
    vertical-align: middle;
}

nav ul li a:hover {
    color: #e1dbd8;
    border-top:2px inset #e1dbd8;
    text-decoration: none;
}

.ativo {
    color: #E8CCB0;
    border-top:2px solid #E8CCB0;
    text-decoration: none;
}
<nav style="margin-top: 20px; border-bottom: 1px solid #664232">
    <div class="row">
        <div class="col-sm-12">
            <ul>
                <li  style="line-height: 40px"><a href="#" class="ativo">Apresentação</a></li>
                <li><a href="#">Apresentação<br>Apresentação</a></li>
                <li><a href="#">Apresentação<br>Apresentação</a></li>
                <li style="line-height: 40px"><a href="#">Apresentação</a></li>
                <li><a href="#">Apresentação<br>Apresentação</a></li>
                <li style="line-height: 40px"><a href="#">Apresentação</a></li>
                <li style="line-height: 40px"><a href="#">Apresentação</a></li>
                <li style="line-height: 40px"><a href="#">Apresentação</a></li>
                <li><a href="#">Apresentação<br>Apresentação</a></li>
            </ul>
        </div>
    </div>
</nav>

código no jsfiddle

Obrigado

4
  • Você desejaria algo como isso: jsfiddle.net/g87bkq11/7 ? 24/01/2016 às 23:05
  • Tava com um erro ai no css quando postei. no width tava 10% mas o certo é 11%. Veja ai agora. Eu preciso que os menus fiquem todos no mesmo espaço e o ultimo não quebre a linha e nem fique menor que era o caso quando se poe 10% no tamanho. 24/01/2016 às 23:08
  • Mas se não quebrar a linha, o que deve acontecer? 24/01/2016 às 23:15
  • display: flex; é ate aconselhavel
    – user37612
    25/01/2016 às 2:05

0

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

Pesquise outras perguntas com a tag .