3
respostas

Problema com a propriedade "display: inline-block"

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo A tag section e atividade Reforçando o inline-block

por FELIPE S.
| 103.5k xp | 5 posts

Olá, devs. Como estão?

Primeiro, muito feliz em estar apreendendo. Tem sido muito enriquecedor o conteúdo.

Então, tenho tido dificuldades no uso do display: inline-block. Vou mostrar pra vocês exatamente o trecho do código em que não estou conseguindo evoluir:

No HTML:

<main>
            <ul class="produtos">
                <li>
                    <h2>Cabelo</h2>
                    <img src="imagens/cabelo.jpg">
                    <p>Tesoura ou máquina</p>
                    <p>R$ 24,99</p>
                    <h2>Barba</h2>
                    <img src="imagens/barba.jpg">
                    <p>Corte e desenho profissional</p>
                    <p>R$ 24,99</p>
                    <h2>Cabelo + barba</h2>
                    <img src="imagens/cabelo+barba.jpg">
                    <p>Combo completo</p>
                    <p>R$ 34,99</p>
                </li>
            </ul>
</main>

No editor CSS:

.produtos li{
    display: inline-block;
}

Então, o problema se dá quando - no navegador (Chrome ou Edge) - os elementos não ficam dispostos lado a lado, conforme instrui o professor. Procurei aqui no fórum alguma solução. Encontrei problemas semelhantes, mas aplicando as repostas, não obtive êxito.

Obrigado.

3 respostas
por Anthoni
| 323.2k xp | 164 posts

Felipe, é porque vc colocou todo o conteúdo na mesma li por isso eles não estão ficando um do lado do outro se vc colocar como demonstrado abaixo vai dar certinho.

<main>
    <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>
</main>
por Edson Luiz Lima Dos Santos
| 201k xp | 121 posts

Vi que o seu html esta errado o seu css esta certo abaixo esta um exemplo, vc não colocou o LI da forma correta:

<main>
      <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>
por FELIPE S.
| 103.5k xp | 5 posts

Perfeito, Anthoni e Edson. Entendi que para cada tag < li> preciso fechar com < /li>. Ajuda de grande valia. Ficarei mais atento na próxima.

Obrigado e abraço!