Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Links não ficam em linha

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <header>
            <div class="caixa">
                <h1><img src="logo.png"></h1>
                <nav>
                    <ul>
                        <li><a href="C:\Users\Dell\Desktop\Programação\HTML_CSS\Pt1\index.html">Home</a></li>
                        <li><a href="C:\Users\Dell\Desktop\Programação\HTML_CSS\Pt2\produtos.html">Produtos</a></li>
                        <li><a href="C:\Users\Dell\Desktop\Programação\HTML_CSS\Pt3\contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>
header{
    background-color: #BBBBBB;
    padding: 20px 0 0 20px;

}

.caixa{
    position: relative;
    width: 940px;
    margin: 0 auto;


}

nav{
    position: absolute;
    top: 110px;
    right: 0;

}

nav li {
    display: inline;
    margin: 0 0 0 15px;


}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;

}

nav a:hover{
    color: #C78C19;
    text-decoration: underline;

}

HTML e CSS respectivamente. Nas demais páginas como produto e contato, os links ficam alinhados em linha, um ao lado do outro. Entretanto, na página inicial o mesmo não ocorre.

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
3 respostas

Opa Luciano beleza? Seu seletor nav li está com o display: inline Experimente display: inline-block :D

Oi André,

Mesmo com a alteração, links permanecerão um embaixo do outro. Não alinham em linha de jeito algum...

solução!

Consegui. Havia uma tag "ul" em meio ao que sobrou do CSS de produto que acabou "roubando" os atributos que deveria ir pra nav ul. Ao usar usar a tag de comentário "/* */" consegui isolar a situação e ajustar o documento, apresentando agora as informações em linha.