Come visualizzare le immagini <figure> sulla stessa riga HTML/CSS

Question

Ho 4 immagini all'interno di elementi con didascalie all'interno di elementi.

Ogni immagine viene visualizzata sotto l'altro come:

IMMAGINE
caption

IMMAGINE
caption

IMMAGINE
caption

IMMAGINE
didascalia

Vorrei le immagini di apparire come:

immagine immagine immagine immagine
captioncaptioncaptioncaption

mio HTML:

<div id="earlylife_images"> 
      <figure> 
       <img src="images/early/moore01.jpg" alt="Roger Moore Teenage" width="150" height="150"> 
       <figcaption>A young Roger Moore</figcaption> 
      </figure> 

      <figure> 
       <img src="images/early/moore02.jpg" alt="Roger Moore 30's" width="150" height="150"> 
       <figcaption>Roger Moore in his 30's</figcaption>      
      </figure> 

      <figure> 
       <img src="images/early/moore03.jpg" alt="Roger Moore as James Bond" width="150" height="150"> 
       <figcaption>Roger Moore as James Bond</figcaption> 
      </figure> 

      <figure> 
       <img src="images/early/moore04.jpg" alt="Roger Moore Recent" width="150" height="150"> 
       <figcaption>Roger Moore in more recent years</figcaption>    
      </figure> 

      </div> 

Answer 1

Stavo pensando:

figure { 
    width: 25%; 
    float: left; 
    margin: 0; 
    text-align: center; 
    padding: 0; 
} 

È possibile controllare qui: http://jsfiddle.net/cBkTc/3/

Answer 2

Fai figureinline-block.

figure { 
    display: inline-block; 
}