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

Imagem Benefícios não vai para o lado direito

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 Fernanda Midori Cho
| 67.1k xp | 2 posts

Olá! Segui todos os passos para que a imagem ficasse no lado direito, através do** inline-block**, mas a imagem continua abaixo da lista. O que vocês acham que pode ser? Desde já, agradeço!!

            <h2>Benefícios</h2>
            <ul>
                <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>
            </ul>
        </div>

        <img src="beneficios.jpg" class="imagembeneficios">
ul {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

.imagembeneficios {
    width: 40%;
}
2 respostas
solução!
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team

Olá Fernanda, tudo bem?

O que está causando essa alteração é que a imagem encontra-se fora da <div class="beneficios">, dessa forma:

<h2>Benefícios</h2>
<ul>
    <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>
</ul>
</div>

<img src="beneficios.jpg" class="imagembeneficios"> <!--imagem fora da div-->

A <div> é um elemento do tipo block, isso significa que por padrão ela irá ocupar 100% da largura da tela. Como a imagem está fora desse escopo, a <div> ocupa a tela toda e o próximo elemento irá se posicionar abaixo dela. Veja:

ferramenta do desenvolvedor apontando para a div.beneficios ocupando 100% da largura da tela e a image fora da div, abaixo e a esquerda.

Modificando o código, ficará assim:

<div class="beneficios">
    <h3 class="titulo-centralizado">Benefícios</h3>

    <ul>
        <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>
    </ul>
    <img src="beneficios.jpg" class="imagembeneficios">
</div>

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!

por Fernanda Midori Cho
| 67.1k xp | 2 posts

Muito obrigada, deu certo!!!