4
respostas

Inline-block

Fiquei com duvida, onde tenho que juntar a tag img com a ul, isso é a melhor solução ou existe outra?

4 respostas

Mostre o código, fica melhor para te ajudar

Fala Jessé <ul class="lista-itens"> <li class="itens">Atendimento ao cliente.</li> <li class="itens">Espaço diferenciado.</li> <li class="itens">Localização.</li> <li class="itens">Profissionais quailificados.</li> <li class="itens">Pontualidade.</li> <li class="itens">Limpeza.</li> </ul><img src="imagens/beneficios.jpg" class="imagemBeneficios"> está vendo na ultima linha tive que juntar a tag img com o fechamento da tag ul pois o inline-block considera qualquer espaçamento no arquivo. Mas ae penso que se não pode ter algo melhor como por exemplo o box-sizing: border-box; que interpreta tudo como um conjunto.

Só para te entender melhor... você pretende colocar a imagem lado a lado com a lista, no layout?

Se sim, Já tentou usar o float? ou até mesmo criando uma div envolta na lista e outra em volta da imagem. Daí, você define os tamanhos em cada uma delas e usando display: flex; align-content: center; e justify-content: space-between ;

Quando eu estiver no meu PC, posso ver melhor isso para você...

mas me fale se é essa sua intensão, de colocar lado a lado, lista e imagem.

Boa noite Rafael,

Realmente fica bem estranho mesmo, eu prefiro programar o html da melhor forma visual possível (com identação de código e quebrando linhas), e todos os ajustes de posicionamento realizar no CSS.

No caso o ideal é que seu HTML fique dessa forma:

<ul class="lista-itens">
    <li class="itens">Atendimento ao cliente.</li>
    <li class="itens">Espaço diferenciado.</li>
    <li class="itens">Localização.</li>
    <li class="itens">Profissionais quailificados.</li>
    <li class="itens">Pontualidade.</li>
    <li class="itens">Limpeza.</li>
</ul>

<img src="imagens/beneficios.jpg" class="imagemBeneficios">

Já no CSS teríamos a opção de definir uma margen negativa no segundo elemento pra compensar o espaço, ajustar os elementos utilizando float ou definir um font-size = 0 no elemento inline-block pai, mais ou menos dessa forma:

ul.lista-itens{
    font-size: 0px;
}
ul.lista-itens li{
    font-size: 16px;
}

img.imagemBeneficios{
    margin: 0px;
    padding: 0px;
    float: left;
}

Caso você não consiga dessa forma nos envie seu código html e css pra gente tentar ajudar.

Abraços.