0

Tenho o seguinte problema , quando vou inserir alguma foto com o background ele fica quebrando linha :
inserir a descrição da imagem aqui

Eu queria que eles ficassem alinhados :
Ex: [Imagem] - [Imagem]

HTML:

<span id="vote"><a href="#" return false;">
        <div class="like"></div>
    </a> - <a href="#" return false;">
        <div class="unlike"></div>
    </a></span>

CSS:

.like {  background: url('../../common/botoes/like-button.png') no-repeat center center;     background-position: center; background-size: 24px 24px; height: 24px; }
.unlike {  background: url('../../common/botoes/unlike-button.png') no-repeat center center;     background-position: center; background-size: 24px 24px;  height: 24px; }

Observação o id vote não possui nada referenciado no css.

2 Respostas 2

3

Tire o traço -.

coloquei o background azul só pra ter noção do container

Usando display: flex;...

#vote {
  background: dodgerblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

.like {  
  background: url('http://plugcitarios.com/wp-content/uploads/2013/06/like.jpg') no-repeat center center;     
  background-position: center; 
  background-size: 24px 24px; 
  width: 24px;
  height: 24px; 
}
.unlike {  
  background: url('http://www.ironmonk.net/wp-content/uploads/2014/09/unlikefanpage.png') no-repeat center center;     
  background-position: center; 
  background-size: 24px 24px;  
  width: 24px;
  height: 24px; 
}
<span id="vote">
  <a href="#">
    <div class="like"></div>
  </a> 
  <a href="#">
    <div class="unlike"></div>
  </a>
</span>

Agora usando float: left;

#vote {
  background: dodgerblue;
}

.like {  
  background: url('http://plugcitarios.com/wp-content/uploads/2013/06/like.jpg') no-repeat center center;     
  background-position: center; 
  background-size: 24px 24px; 
  width: 24px;
  height: 24px; 
}
.unlike {  
  background: url('http://www.ironmonk.net/wp-content/uploads/2014/09/unlikefanpage.png') no-repeat center center;     
  background-position: center; 
  background-size: 24px 24px;  
  width: 24px;
  height: 24px; 
}

.like, .unlike {
  float: left;
}
<span id="vote">
  <a href="#">
    <div class="like"></div>
  </a> 
  <a href="#">
    <div class="unlike"></div>
  </a>
</span>

Quando usar float e flex

Bom depende do seu público, se a maioria usa navegador antigo, não muitas, mas algumas pessoas ainda usam Internet Explorer, pelo fato de ele já vir instalado no Window, e display: flex não seria apropriado para tal, pois é mais para browsers atuais. você pode dar uma olhada na compatibilidade:

https://caniuse.com/#search=flex

float serve na maioria dos navegadores, porém é mais difícil de configurar um layout com float [na minha opnião].

https://caniuse.com/#search=float

Dica Eu estou preferindo ultimamente flex, mas como eu disse, depende da circunstância.

Você pode ver aqui quais os navegadores mais usados no Brasil:

http://gs.statcounter.com/browser-market-share/all/brazil

Final

Mesmo assim eu iria de flex se eu fôsse você, porque como você pode ver o Internet explorer não ajuda muito, mas em compensação, a maioria dos outros navegadores suportam, se não, parcialmente.

2
  • Obrigado as duas funcionaram não sei em qual dar solução :D
    – reigelado
    4/03/2018 às 17:04
  • Sé pudesse daria resposta pras duas , obrigado amigo!
    – reigelado
    4/03/2018 às 17:04
0

Já que você deu um height às divs, precisa também dar um width. E converta as divs em inline-block, para que possam ficar lado a lado (o ícone do exemplo abaixo é apenas ilustrativo):

.like {
   background: url('http://www.axiomtek.com/Download/SocialLink/en-US/Social_icon_2.svg') no-repeat center center;
   background-position: center; 
    background-size: 24px 24px;
    height: 24px;
    width: 24px;
    display: inline-block;
}

.unlike {
   background: url('http://www.axiomtek.com/Download/SocialLink/en-US/Social_icon_2.svg') no-repeat center center; 
    background-position: center; 
    background-size: 24px 24px;
    height: 24px;
    width: 24px;
    display: inline-block;
}
<span id="vote">
   <a href="# return false;">
      <div class="like"></div>
   </a>
   <a href="# return false;">
      <div class="unlike"></div>
   </a>
</span>

Melhorias no código CSS

Seu código tem alguns ruídos desnecessários.

Não precisa colocar center center duas vezes. Basta um que já alinha nos dois eixos.

Evite códigos repetitivos. É bom agrupar mesmos estilos a elementos diferentes num só bloco:

.like,
.unlike{
   background-size: 24px 24px;
   height: 24px;
   width: 24px;
   display: inline-block;
}

Os estilos individuais você coloca de forma separada:

.like {
   background: url('https://78.media.tumblr.com/avatar_3e32d6779210_16.pnj') no-repeat center;
}

.unlike {
   background: url('https://78.media.tumblr.com/avatar_3e32d6779210_16.pnj') no-repeat center; 
}
2
  • Obrigado as duas funcionaram não sei em qual dar solução :D
    – reigelado
    4/03/2018 às 17:04
  • Fica a seu critério. Só adicionei umas dicas na resposta. Abs!
    – Meu ovo
    4/03/2018 às 17:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .