Questão de Programação — HTML (HyperText Markup Language) — FUNDATEC 2023

Menu de navegação horizontal com CSS

Gabarito: letra C. Para transformar os itens de uma lista (<li>) em um menu horizontal, o seletor correto é nav ul li — que atinge os itens da lista dentro da ul dentro da nav — e a propriedade display: inline-block faz com que cada item fique lado a lado, com width: 100px definindo a largura de cada um. As demais alternativas erram no seletor (usam .li, que é classe, ou #nav, que é id) ou na propriedade display (usam block, que empilha os itens verticalmente).

O menu de navegação horizontal é um padrão clássico de interface web: uma lista não ordenada (<ul>) contendo itens (<li>), cada um com um link (<a>). Por padrão, os elementos <li> são blocos e ficam empilhados verticalmente. Para colocá-los lado a lado, usamos CSS para alterar o display dos itens para inline-block (ou flex/grid, mas a questão pede o método tradicional). O inline-block combina o comportamento de elemento em linha (ficar na mesma linha) com o de bloco (permitir definir largura e altura).

A estrutura HTML típica é:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Contato</a></li>
  </ul>
</nav>

Para estilizar, precisamos selecionar os itens <li> que estão dentro da ul que está dentro da nav. O seletor nav ul li faz exatamente isso: desce na hierarquia de elementos. Aplicar display: inline-block nesses itens os coloca lado a lado, e width: 100px dá a cada um uma largura fixa, criando o menu horizontal.

A pegadinha da questão está em dois pontos: o seletor e a propriedade display. A alternativa A usa nav ul .li — o ponto antes de li indica uma classe chamada "li", que não existe no HTML (é um elemento, não uma classe). A alternativa B usa nav ul li a, que seleciona os links dentro dos itens, não os itens em si — e aplica display: block, que não cria o efeito horizontal. A alternativa D usa #nav, que é um seletor de id, mas o HTML usa a tag <nav>, não um id. A alternativa E usa #nav e display: block, ambos errados. A alternativa C é a única que seleciona corretamente os itens e usa inline-block.

Alternativa A — ❌ Incorreta

O seletor nav ul .li está errado porque o ponto antes de li indica uma classe CSS chamada "li", mas no HTML li é um elemento (tag), não uma classe. Para selecionar o elemento, o seletor deve ser nav ul li, sem o ponto. Além disso, mesmo que o seletor estivesse correto, display: inline-block seria a propriedade certa, mas o seletor invalida a alternativa.

Alternativa B — ❌ Incorreta

O seletor nav ul li a seleciona os links (<a>) dentro dos itens da lista, não os itens (<li>) em si. Aplicar display: block nos links não cria o menu horizontal — os links continuariam empilhados verticalmente, pois block faz o elemento ocupar toda a largura disponível e quebrar linha. Para o menu horizontal, o display deve ser aplicado nos <li>, não nos <a>.

Alternativa C — ✅ Correta ⟵ GABARITO

O seletor nav ul li seleciona corretamente os itens da lista (<li>) que estão dentro da ul dentro da nav. A propriedade display: inline-block coloca cada item lado a lado, e width: 100px define a largura de cada um, criando o menu horizontal desejado. Esta é a alternativa que compõe corretamente a estrutura.

Alternativa D — ❌ Incorreta

O seletor #nav é um seletor de id, que só funciona se o elemento tiver id="nav" no HTML. No trecho apresentado, a estrutura usa a tag <nav>, não um id. Além disso, display: inline-block aplicado aos links (<a>) não é o que se busca — o correto seria aplicar nos itens <li>. O seletor errado invalida a alternativa.

Alternativa E — ❌ Incorreta

Assim como a D, usa #nav, que é seletor de id, mas o HTML usa a tag <nav>. Além disso, display: block faz os itens ficarem empilhados verticalmente, não lado a lado. O correto seria display: inline-block para o menu horizontal. O seletor e a propriedade estão ambos errados.

Gabarito: letra C