Fiquei com duvida, onde tenho que juntar a tag img com a ul, isso é a melhor solução ou existe outra?
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.