Display Inline não deixa em linha os tópicos | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

2
respostas

por Filipe Stanguini

| 15.3k xp | 2 posts

Boa noite, Estou tentando colocar o cabeçalho na primeira página criada, porém a lista não fica inline, apenas uma embaixo da outra, ja quebrei a cabeça e nao consigo achar o erro, segue o código do header e o CSS:

                    <nav>
                        <ul>
                            <li> <a href="index.html"> Home </a> </li> 
                            <li> <a href="produtos.html"> Produtos </a> </li>
                            <li> <a href="contato.html">Contato</a></li>
                        </ul>
                    </nav>
            </div>    
    </header>

    header {
             background: #cccccc;
             padding: 20px 0;

            }

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

            }

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


            }

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

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

por Rafael Silva de Souza

| 34k xp | 25 posts

01/03/2022

Olá! Cara, realmente é uma situação estranha. Eu refiz aqui e não deu erro nenhum. Pode ser algum caractere que você esqueceu, pois vi que você não postou o código completo, de modo que não dá pra analisar tudo. O próprio editor acusa onde está o erro, caso seja algum erro de sintaxe.

Veja como o meu ficou e compare com o seu. Irei postar apenas o CSS referente ao nav li.

O HTML ficou assim aqui:

<!DOCTYPE html>

<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barbearia Alura</title>

    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./estilo.css">
</head>


<body>

    <header>

        <div class="caixa">

            <nav>

                <ul>

                    <li><a href="index.html">Home</a></li> 
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>

                </ul>

            </nav>

        </div>   

    </header>
</body>

</html>

Já o CSS ficou assim:

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

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Veja que os itens da lista estão inline.

Espero ter ajudado.

por Filipe Stanguini

| 15.3k xp | 2 posts

04/03/2022

Opa, boa tarde!

Cara, consegui achar aqui, no meu css, estava usando esses parametros para o

mas era referente ao texto de baixo, ao lado da imagem, mas ele estava influenciando na lista tambem

ul{
            display: inline-block;
            vertical-align: top;
            width: 20%;
            margin-right: 15%;
        }


retirei ele e a lista ficou na horizontal, mas acabei alterando o formato da imagem que ficou assim:


![Insira aqui a descrição dessa imagem para ajudar na acessibilidade](https://cdn1.gnarususercontent.com.br/1/934294/938ceafb-1e65-4d8b-963e-969be997f9a6.png)  


Mas um passo de cada vez agora haha

valeu pela ajuda!