Insert Image with CSS Without Line Break

Question

I have the following problem , when I insert some photo with the background it keeps breaking line :

I wanted them to line up :
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; }

Note the id vote has nothing referenced in css.

Answer 1

Take the trace off -.

I put the blue background just to get a feel for the container

Using 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>

Now using 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>

When to use float and flex

Well it depends on your audience, if most use old browser, not many, but some people still use Internet Explorer, because it is already installed in Window, and display: flex would not be appropriate for such as it is more for current browsers. you can take a look at the compatibility:

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

Already float serves in most browsers, but is more difficult to set up a layout with float [in my opinion].

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

Tip I’ve been preferring lately flex, but as I said, it depends on the circumstance.

You can see here which browsers are most used in Brazil:

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

Ending

Even so I would go from flex if I were you, because as you can see the Internet explorer doesn’t help much, but in compensation, most other browsers support, if not, partially.

Answer 2

Since you’ve given one height at divs, also needs to give a width. And convert the divs in inline-block, so that they can stand side by side (the example icon below is only illustrative):

.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>

Improvements to CSS code

Your code has some noises unnecessary.

No need to put center center twice. Just one that already aligns on the two axes.

Avoid repetitive codes. It is good to group the same styles to different elements in one block:

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

The individual styles you put separately:

.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; 
}