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

Por que criar tag nav para ajustar posicionamento?

Oi pessoal,

Fiquei com dúvida sobre o motivo da criação da tag nav no .css para ajustar a lista. Se os itens da lista (home, produtos, contatos) já está na tag nav li, eu não poderia fazer os ajustes de posicionamento dentro dessa tag, para se aplicar a todos?

4 respostas

Para te ajudar entender a diferença entre usar os dois seletores, basta pensar numa caixa, pois é assim que o CSS funciona.

  • O que você acha mais fácil: empurrar os itens dentro de uma caixa e colocá-los em um local ou apenas pegar a caixa e colocá-la no local desejado?
    • Você poderia usar o nav li para posicionar os elementos, mas na prática você estaria posicionando cada um desses elementos.
  • Então, por que usar a tag nav?
    • Pois assim você está fazendo o posicionamento de forma geral para todos. Isso te dá mais flexibilidade para o layout.
    • Além disso, te dá mais controle sobre como a área de navegação se comporta em relação ao restante da página.

Diego, obrigada por tentar esclarecer. Consegui compreender um pouco ..

Se eu utilizasse o nav li para fazer o posicionamento, eu teria que fazer um a um? Ou seja, em cada linha da lista? Como seu eu tivesse fazendo um ajuste inline, seria isso?

solução!

Na verdade o CSS iria aplicar para todos os elementos li dentro da seção nav.

Para ficar mais claro você pode "brincar com os estilos" no Front-End Editor

Vou deixar os codigos aqui, você pode copiar e colocar no Front-End Editor, talvez fica mais claro a visualização pra você,nele mudei as cores de fundo pra ficar melhor de ver o que ocorre com nav li. Tente por exemplo tirar o width 100% do nav e jogar no nav li, verá que a formação ficara incorreta e imprecisa. Tente adicionar e alterar outros elementos para que fique claro pra você.

HTML

<nav>
   <ul>
      <li>Home</li>
      <li>Produtos</li>
      <li>Contatos</li>
   </ul>
</nav>
  • CSS
nav {
   background-color: black;
   width: 100%;
}
nav ul {
   display: inline;
}
nav li {
   display: inline-block;
   margin-right: 10px;
}

nav li {
 background-color: red;
   color: white;
   font-size: 18px;
   list-style: none;
   padding: 10px;
}
nav li:hover {
   background-color: yellow;
}

Diego, mexer dessa forma ficou muito mais claro para mim. MUITO OBRIGADA!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software