Les éléments de la liste non-ordonnée sont en retrait

Question

Salut à tous j'ai une liste ordonnée qui est en retrait lorsque l'écran devient plus large. Chaque couche d'éléments de liste est plus indentée que la précédente.

Quelqu'un peut-il aider. Voici mon code

<div id="left-content"> 

     <div id="product-header"> 

      <h1 class="red-text">Gmail</h1> 
      <h2>A google approach to email</h2> 

     </div> 

     <p>Gmail is built on the idea that email can be more intuitive, efficient, and useful. And maybe even fun. After all, Gmail has:</p> 

     <ol class="features"> 
      <li> 
       <img src="../IMAGES/google-storage.png" alt="google-storage"> 
       <p class="features-header">Lots of space</p> 
       <p>Over 10275.525924 megabytes (and counting) of free storage.</p> 
      </li> 
      <li> 
       <img src="../IMAGES/google-cancel.png" alt="google-cancel"> 
       <p class="features-header">Less spam</p> 
       <p>Keep unwanted messages out of your inbox.</p> 
      </li> 
      <li> 
       <img src="../IMAGES/google-mobile.gif" alt="google-mobile"> 
       <p class="features-header">Mobile access</p> 
       <p>Get Gmail on your mobile phone.<a href="#">Learn more</a></p> 
      </li> 
     </ol> 

    </div><!-- "left-content --> 




#product-header{ 
    margin-bottom: 1.225em; 
} 

#main-content{ 
    padding: 2em; 
    width: 80%; 
    margin: 0 auto; 
} 

#left-content{ 
    width: 45%; 
    min-width: 18.75em; 
} 

#left-content p{ 
    font-size: .8125em; 
} 

.red-text{ 
    color: red; 
} 

.features li{ 
    margin: 0.625em 2.5em 1.25em 0; 
} 

.features img{ 
    float: left; 
    margin: 0 1em 1em 0; 
} 

.features-header{ 
    font-size: : .875em; 
    margin-bottom: .3em; 
} 

Je l'ai réduit à la taille de la police sur le # contenu gauche p.

Merci à tous ceux qui peuvent aider.

Answer 1

Le comportement indésirable est probablement dû au fait que les images flottantes sont légèrement plus hautes en hauteur que le texte.

Essayez d'ajouter clear: both-.features li:

.features li{ 
    clear: both; 
    margin: 0.625em 2.5em 1.25em 0; 
} 

Vous trouverez un exemple très compact ici: http://jsfiddle.net/urE23/