Fiquei com duvida, onde tenho que juntar a tag img com a ul, isso é a melhor solução ou existe outra?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Fiquei com duvida, onde tenho que juntar a tag img com a ul, isso é a melhor solução ou existe outra?
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.