CSS: Retrait des bordures autour des images vissage du positionnement de l'image

Question

J'essaie de placer une liste d'images horizontalement dans une barre large et courte. Quand j'ai positionné les images à l'origine, il y avait des frontières autour de chacune. Mais lorsque j'ai supprimé les bordures, les images ont toutes été décalées de quelques pixels, de sorte qu'elles n'apparaissent plus dans la barre.

Bizarrement, après -1,1em (ou -11px), la marge supérieure des images ne diminuera plus. C'est indépendamment de savoir si j'ai des frontières autour des images ou non; c'est juste que -1.1em est assez petit avec les bordures mais n'est pas sans les bordures.

Mon HTML:

<div class="wrap"> 
    <ul class="images"> 
     <li><img src="1.bmp"/></li> 
     <li><img src="2.bmp"/></li> 
     <li><img src="3.bmp"/></li> 
     <li><img src="4.bmp"/></li> 
     <li><img src="5.bmp"/></li> 
     <li><img src="6.bmp"/></li> 
     <li><img src="7.bmp"/></li> 
     <li><img src="8.bmp"/></li> 
     <li><img src="long_image.bmp"/></li> 
    </ul> 
</div> 

Et mon CSS:

div .wrap { 
position: relative; 
height: 2.5em; 
line-height: 2.5em; 
border: #000000 .1em solid; 
} 

ul .images { 
list-style-type: none; 
} 

li { 
display: inline; 
} 

li img { 
margin-top: -1.1em; 
border-bottom: #000000 .1em solid; 
} 

Answer 1

Essayez quelque chose comme ceci:

<div class="wrap"> 
    <ul id="list_images"> 
     <li><img src="1.bmp"/></li> 
     <li><img src="2.bmp"/></li> 
     <li><img src="3.bmp"/></li> 
     <li><img src="4.bmp"/></li> 
     <li><img src="5.bmp"/></li> 
     <li><img src="6.bmp"/></li> 
     <li><img src="7.bmp"/></li> 
     <li><img src="8.bmp"/></li> 
     <li><img src="long_image.bmp"/></li> 
    </ul> 
</div> 

#list_images ul{ 
    margin: 18px 0; 
    padding: 0; 
    list-style: none; 
} 

#list_images ul li{ 
    margin: 0 10px 0 0; 
    padding: 0; 
    display: block; 
    float: left; 
    width: 80px; 
    border: 1px solid #000; 
} 
#list_images ul li img{ 
    display:block; 
    width: 100%; 
    height: 100%; 
    text-decoration: none; 
    float: left; 
} 

Answer 2

Essayez de donner li { display: block; float: left; list-style: none; }