2
respostas

Dúvida sobre display de listas

Olá, Pessoal, estou com uma dúvida, o meu display não está lado a lado, fica um embaixo do outro. Alguém sabe dizer onde está meu erro? Aqui está o meu código html:

2 respostas

Marta, o que você esta exibindo é o resultado do navegador, se poder edita e coloca o código ou talvez você tenha colocado e esqueceu de marca </> para aparecer o código. O segredo aqui esta na classe produtos que esta na UL usando a classe você vai no css e aplica o DISPLAY:inline-block mas vamos lá, vou deixar um exemplo de código html para você ver com css:

<ul class="produtos">
        <li>
          <h2>Cabelo</h2>
          <img src="imagens/cabelo.jpg" />
          <p>Tesoura ou máquina</p>
          <p>R$ 24,99</p>
        </li>

        <li>
          <h2>Barba</h2>
          <img src="imagens/barba.jpg" />
          <p>Corte e desenho profissional</p>
          <p>R$ 24,99</p>
        </li>
        <li>
          <h2>Cabelo + barba</h2>
          <img src="imagens/cabelo+barba.jpg" />
          <p>Combo completo</p>
          <p>R$ 34,99</p>
        </li>
      </ul>

O bloco a baixo é o CSS usando display: inline-block

.produtos li {
  display: inline-block;
}

Esse exemplo é bem simples que tirei direto de uma das aulas do curso de HTML e CSS, mas existe variações usando apenas INLINE como não sei como esta seu código não tem como passar uma dica mais exata. Espero que tenha ajudado.

Oi Edson, Obrigada pela resposta. Vou tentar colocar o codigo html aqui novamente, vamos ver se dá certo.

<ul>
                <li class="cabecalho_link"><a href="#">Sobre</a></li>
                <li class="cabecalho_link"><a href="#">Planos</a></li>
                <li class="cabecalho_link"><a href="#">Blog</a></li>
                <li class="cabecalho_link"><a href="#">Destaques</a></li>
                <li class="cabecalho_link"><a href="#">Institucional</a></li>
                <li class="cabecalho_link"><a href="#">Contato</a></li>
            </ul>