CSS: Entfernen von Rändern um Bilder verschraubt Bildpositionierung

Question

Ich versuche, eine Liste von Bildern horizontal in eine breite, kurze Leiste zu legen. Als ich die Bilder ursprünglich positioniert habe, gab es jeweils Ränder. Aber als ich die Ränder entfernte, verschoben sich die Bilder alle ein paar Pixel nach unten, so dass sie nicht länger in der Leiste erscheinen.

Seltsamerweise wird nach -1.1em (oder -11px) der obere Rand der Bilder nicht mehr abnehmen. Dies ist unabhängig davon, ob ich die Bilder umrande oder nicht; es ist nur so, dass -1.1em mit den Grenzen klein genug ist, aber nicht ohne Grenzen.

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

Und mein 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

so etwas wie dieses Versuchen:

<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

Versuchen li { display: block; float: left; list-style: none; }