Wie man <figure> Bilder in der gleichen Zeile anzeigt HTML/CSS

Question

Ich habe 4 Bilder innerhalb von Elementen mit Bildunterschriften innerhalb von Elementen.

wird jedes Bild unter einander wie angezeigt:

IMAGE
caption

IMAGE
caption

IMAGE
caption

BILD
Bildunterschrift

würde ich die Bilder gerne erscheinen wie:

Bild Bild Bild Bild
BildunterschriftBildunterschriftBildunterschriftcaption

My 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

ich dachte:

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

können Sie es hier ansehen: http://jsfiddle.net/cBkTc/3/

Answer 2

Make figureinline-block.

figure { 
    display: inline-block; 
}