Imagens com link de lado em um widget

Eu queria deixar várias imagens com link de lado em um widget, que nem o widget "Social bookmarking"

Olá!

Eu não compreendi, mas experimente:

Código:

<div style="float: left"><a href="LINK">NOMEDOLINK</a><img src="ENDEREÇOIMG"></img></div>

Não funcionou. É para ficar todas as imagens lado a lado e com link que nem o Widget "Social bookmarking"
https://i.imgur.com/JVfkHYU.png

Ah, agora o senhor descreveu melhor!
Substitua por esse:

Código:

<div style="float: left"><a href="LINK">NOMEDOLINK<img src="ENDEREÇOIMG"></img></a> <a href="LINK">NOMEDOLINK<img src="ENDEREÇOIMG"></img></a></div>

O link ficou aparecendo ao lado da imagem.

Olá amigo!

Não compreendi muito bem!
Você deseja uma lista de imagens uma do lado da outra, que ao clicar em cima redireccionara para um link?

Até mais.

Hã, e sem o link?
Troque por esse:

Código:

<div style="float: left"><a href="LINK"><img src="ENDEREÇOIMG"></img></a> <a href="LINK">NOMEDOLINK<img src="ENDEREÇOIMG"></img></a></div>

iChees escreveu:Olá amigo!

Não compreendi muito bem!
Você deseja uma lista de imagens uma do lado da outra, que ao clicar em cima redireccionara para um link?

Até mais.

Isso mesmo.

MateusA escreveu:Hã, e sem o link?
Troque por esse:

Código:

<div style="float: left"><a href="LINK"><img src="ENDEREÇOIMG"></img></a> <a href="LINK">NOMEDOLINK<img src="ENDEREÇOIMG"></img></a></div>

Agora só apareceu os links. São os links nas imagens, com todas as imagem ao lado da outra.

Hã, foi erro meu.
Experimente:

Código:

<div style="float: left"><a href="LINK"><img src="ENDEREÇOIMG"></img></a> <a href="LINK"><img src="ENDEREÇOIMG"></img></a>
<a href="LINK"><img src="ENDEREÇOIMG"></img></a> <a href="LINK"><img src="ENDEREÇOIMG"></img></a>
</div>

MateusA escreveu:Hã, foi erro meu.
Experimente:

Código:

<div style="float: left"><a href="LINK"><img src="ENDEREÇOIMG"></img></a> <a href="LINK"><img src="ENDEREÇOIMG"></img></a>
<a href="LINK"><img src="ENDEREÇOIMG"></img></a> <a href="LINK"><img src="ENDEREÇOIMG"></img></a>
</div>

Funcionou; mas,
Como eu aumento a distância de uma imagem para a outra?
Como eu centralizo as imagens no meio do widget?

Olá amigo!

Aqui tem:

Código:

<div id="imagens" style="float: center"><a href="LINK"><img src="ENDEREÇOIMG"></img></a> <a href="LINK"><img src="ENDEREÇOIMG"></img></a>
<a href="LINK"><img src="ENDEREÇOIMG"></img></a> <a href="LINK"><img src="ENDEREÇOIMG"></img></a>
</div>
<style>
#imagens img {
padding-left: 5px;
}
</style>

Se quiser adicionar mais espaço entre as imagens aumente o valor 5px. Caso queira diminuir o espaço, reduza esse valor.

Abraços.

Aumentou a distância das imagens, mas não ficaram no centro do widget, ficou do lado esquerdo.

Olá amigo.

Erro meu

Tente:

Código:

<div id="imagens"><a href="LINK"><img src="ENDEREÇOIMG"></img></a> <a href="LINK"><img src="ENDEREÇOIMG"></img></a>
<a href="LINK"><img src="ENDEREÇOIMG"></img></a> <a href="LINK"><img src="ENDEREÇOIMG"></img></a>
</div>
<style>
#imagens img {
padding-left: 5px;
}
#imagens {
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>

Abraços.