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

"display: inline-block;" Não funcionou

Fiz o código de html conforme o professor instruiu

  • Atendimento aos Clientes
  • Espaço Diferenciado
  • Localização
  • Profissionais Qualificados
  • Pontualidade
  • Limpeza

Assim como também o css } .beneficios{ padding: 3em 0; } .conteudo-beneficios{ width: 640px; margin: 0 auto; } .lista-beneficios{ width: 40%; display: inline-block; vertical-align: top; } .imagem-beneficios{ width: 60%; }

Porém minha imagem não está ficando do lado da lista. O que poderia ser?

4 respostas

Oii Gabriel, quando passei pelo treinamento, não deixei o .conteudo-beneficios com um width fixo.

Coloquei assim:

.beneficios { padding: 3em 0; }

.conteudo-beneficios { width: 60%; margin: 0 auto; justify-self: center; }

.lista-beneficios { display: inline-block; vertical-align: top; width: 40%; }

.imagembeneficios { width: 60%; }

No meu também não funcionou, fiz como o do João Victor.

solução!

Oi, Gabriel! Tudo bem? Te comento que me aconteceu a mesma coisa, mas logo descobri que foi por uma distração minha. A imagem deve estar também dentro da div para que o alinhamento aconteça, caso contrário, você estará formatando apenas o texto no css e a imagem não se alinhará ao texto. Coloco o exemplo do código correto logo abaixo:

HTML:

`<div class="conteudo-beneficios">
                <ul class="lista-beneficios">
                    <li class="itens">Atendimento aos clientes</li>
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais qualificados</li>
                    <li class="itens">Pontualidade</li>
                    <li class="itens">Limpeza</li>
                </ul><img src="diferenciais.jpg" class="imagem-beneficios">
</div>`

CSS: .conteudo-beneficios { width: 640px; margin: 0 auto; justify-self: center; }

.lista-beneficios { width: 40%; display: inline-block; vertical-align: top; }

.imagem-beneficios { width: 60%; }

Tive o mesmo problema! no meu caso o problema foi que eu inventei de criar o habito de digitar a tag completa, sem precisar que o vs code complemente minhas tag's, ai parece que ele não reconheceu como tag e sim como texto, bastou eu começar a tag e o vs code complementar que rodou! pensei que poderia ser algo que digitei errado mais não!

HTML

  • Atendimento aos Clientes
  • Espaço diferenciado
  • Localização
  • Profissionais Qualificados

CSS .conteudo-beneficios { width: 640px; margin: 0 auto; }

.lista-beneficios { width: 40%; display: inline-block; }

.imagem-beneficios { width: 60%; }

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