Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Imagem beneficio não muda com o display: inline-block

Referente ao curso HTML5 e CSS3 parte 1: crie uma página da Web, no capítulo Listas e divisões de conteúdo e atividade Inline e Block

por Leonam Lopes de Medeiros
| 22.9k xp | 4 posts

Imagem beneficio não muda de lugar com o display: inline-block, ja tentei outras formas como mudar s posição da imagem colocando margin-right e margin-left mas nada acontece, o unico que consegui fazer alguma diferenca foi com o display: flex, mas todos os elementos ficavam na mesma linha (inclusive os itens da lista).

meu html:

Beneficios

    <ul>
            <li class="beneficios">Atendimento ao cliente</li>
            <li class="beneficios">Espaço diferenciado</li>
            <li class="beneficios">Localização</li> 
            <li class="beneficios">Profissionais quailidicados</li>

            <img src="Imagens/beneficios.jpg" class="imagem-beneficios">
    </ul>
    </div>

    meu css:
    h2 {

text-align: center; }

ul { display:inline-block }

.beneficios { font-style: italic; }

.imagem-beneficios { width: 50%; }

3 respostas
solução!
por Tarik De Jesus Martins Rocha
| 19.7k xp | 1 posts

Você colocou a tag dentro da lista. Tente colocar a tag de imagem abaixo da lista, isso deve solucionar o problema. (outro detalhe, parece que você usou a tecla de espaço pra fazer a identação do código. Eu recomendo que use a tecla tab pra isso)

<div>
    <ul>
        <li class="beneficios">Atendimento ao cliente</li>
        <li class="beneficios">Espaço diferenciado</li>
        <li class="beneficios">Localização</li>
        <li class="beneficios">Profissionais qualificados</li>
    </ul>

    <img src="Imagens/beneficios.jpg" class="imagem-beneficios">
</div>
por Leonam Lopes de Medeiros
| 22.9k xp | 4 posts

consegui, obrigado

por Juliana Vargas Aguirre Simões
| 14.9k xp | 4 posts

Estou com o mesmo problema, não consigo fazer o dispaly: inline block funcionar.

Meu html

Benefícios

  <ul>
    <li class="itens">Atendimento ao cliente</li>
    <li class="itens">Espaço diferenciado</li>
    <li class="itens">Localização</li>
    <li class="itens">Profissionais Qualificados</li>
  </ul>

  <img src="beneficios.jpg" class="beneficiosimg" >

Meu css

.benefícios{ background: #FFFFFF; }

h2{ text-align: center; }

ul{ display: inline block; }

.beneficiosimg{ width:50% }