Entrar Ainda não tem acesso?
1
resposta

Como colocar o menú de navegação em linha?

Referente ao curso IA generativa no Front-end: trabalhando com acessibilidade, semântica e HTML, no capítulo IA apoiando a refatoração e atividade Refatorando o banner

por GABRIELA LORENA VITTORI
| 37.1k xp | 2 posts

Não sei se entendi corretamente o desafío. Primeiro fiz as alterações sugeridas pela Luri, trocando as tags comuns por tags semânticas. Porém, no menú de navegação que no código foi colocado em lista (e consequentemente agora aparece em coluna), como fazer para colocá-lo em um ao lado do outro (em linha) como estava antes?

<nav class="cabecalho__navegacao">
                    <ul>
                        <li><a class="cabecalho__navegacao--item" href="">Blog</a></li>
                        <li><a class="cabecalho__navegacao--item" href="">Pacotes de viagem</a></li>
                        <li><a class="cabecalho__navegacao--item" href="">Contato</a></li>
                    </ul>
                </nav>
1 resposta
por Victor Costa Santos
| 1918.5k xp | 3680 posts
Alura Scuba Team Monitor de ForumOps

Oi, Gabriela!

Com base nesse código, voce pode tentar algo assim no seu CSS, recomendo que caso não entenda uma propriedade, como flex que use o Luri, para explicar de forma mais detalhada.

.cabecalho__navegacao ul {
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; /* Alinha os itens em linha */
}

.cabecalho__navegacao li {
    margin-right: 20px; /* Adiciona espaço entre os itens */
}

.cabecalho__navegacao--item {
    text-decoration: none; 
}

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!