Problema de alineamiento de imágenes utilizando listas no ordenadas

Quiero colocar dentro de una div que mide 988px una galería de imágenes utilizando una "lista no ordenada". El problema es que la última imagen de la derecha no queda alineada al borde de ese lado como si tubiese alguna cosa que lo impide y ella pasa para la línea de abajo.

Mi html es este

Código HTML :

<div id="galeria">
  <ul>
    <li class="lateral-esquerda"><a href="instalacoes/01.jpg" title="#"><img src="images/galeria/camisetas-empresas-personalizadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li><a href="instalacoes/02.jpg" title="#"><img src="images/galeria/regatas-empresas-personalizadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li><a href="instalacoes/03.jpg" title="#"><img src="images/galeria/abadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li><a href="instalacoes/04.jpg" title="#"><img src="images/galeria/coletes-dupla-face-personalizados.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li><a href="instalacoes/05.jpg" title="#"><img src="images/galeria/bones-promocionais.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li class="lateral-direita"><a href="instalacoes/06.jpg" title="#"><img src="images/galeria/viseiras-personalizadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li class="lateral-esquerda"> <a href="instalacoes/08.jpg" title="#"> <img src="images/galeria/bandanas-personalizadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li> <a href="instalacoes/09.jpg" title="#"> <img src="images/galeria/windbanner.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li> <a href="instalacoes/11.jpg" title="#"> <img src="images/galeria/bandeiras-personalizadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li> <a href="instalacoes/12.jpg" title="#"> <img src="images/galeria/bandeiroes.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li> <a href="instalacoes/13.jpg" title="#"> <img src="images/galeria/ecobags-empresas-personalizadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li class="lateral-direita"> <a href="instalacoes/14.jpg" title="#"> <img src="images/galeria/sacolas-empresas-personalizadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
         </ul>
    <div class="clear"> </div>
</div>

y mi CSS

Código CSS :

#galeria {
    width:988px;
   padding-bottom:15px;
   background-color:#0FF;
   overflow:hidden;
}

#galeria li {
    display:inline;
    width:150px;
    float:left;
   padding-top:20px;
   padding-right:14px;
}

#galeria li.lateral-esquerda {
    display:inline;
    width:150px;
    float:left;
   padding-top:20px;
   padding-right:18px;
}

#galeria li.lateral-direita {
    display:inline;
    width:150px;
    float:left;
   padding-top:20px;
}

Alineamiento correcto
http://l4c.me/fotos/Ishkandar/alineamento-correcto/sizes/o

Situación actual
https://docs.google.com/file/d/0B8Kcz2fc4NboclplUHdaaXlIREU/edit?usp=sharing

Son varias las cosas que deberías cambiar. No he probado el código pero como he hecho esto unas cuantas veces te diré que los estilos para las clases lateral-esquerda y lateral-direita son redundantes porque los elementos a los que les aplicas esos estilos ya son <li> (excepto los paddings laterales).

Por otro lado tienes 12 <li> de 150px cada uno y más el margin que le has puesto excede por mucho los 988px de ancho del contenedor. Y como los <li> tienen display inline lo que ocurrirá es que cuando se complete la primera línea, se creará otra debajo. Debes comprender que cuando un elemento tiene display inline ese elemento se comportará como si fuera una palabra en un párrafo. Como sabrás cuando la cantidad de palabras excede un renglón simplemente se crea otro debajo de éste.

No necesitas flotar los <li> a la izquierda si el tipo de display es inline porque al ser "palabras" ya se alinean a la izquierda, y para que te tome margin en esos elementos debes usar inline-block (las palabras no tienen "margin", solo los párrafos).

Dentro del contenedor #galeria tienes un elemento <ul>, ese elemento debe tener un ancho total a la suma de los anchos de los elementos que contiene y debe tener overflow: visible; para que los elementos contenido siempre tengan espacio a la derecha y así no se cree una nueva línea.

Entonces en mi versión modificada de tu CSS me queda:

Código HTML :

<style type="text/css">
#galeria {
    width:988px;
   padding-bottom:15px;
   background-color:#0FF;
   overflow:hidden;
}
#galeria ul {
   width: 2020px;
   overflow: visible;
}
#galeria li {
    display:inline-block;
    width:150px;
   padding-top:20px;
   padding-right:14px;
}

#galeria li.lateral-esquerda {
   padding-right:18px !important;
}

#galeria li.lateral-direita {
   
}
</style>

Finalmente, y esto suele producir confusión, es que los espacios en blanco (y retorno de carro y tabulaciones, etc...) que aparecen entre los tags <li> ocupan espacio si los elementos <li> son inline o inline-block.

DriverOp, antes que nada gracias por la disposición para ayudar.

Coloqué tu código editado y las imágenes quedaron en apenas una columna.

En relación a tu comentário que la suma de los anchos de las imágenes (150 px) excede los 988 px, es porque ellas tienen que distribuirse en dos líneas.

Coloqué aqui mis medidas para que puedas verlas

[img]https://docs.google.com/file/d/0B8Kcz2fc4NboSkVndTVzLWp0RWs/edit?usp=sharing[/img]

pero si no querés abrir es así

150 + 20 + 150 + 17 + 150 + 17 + 150 + 17 + 150 + 17 + 150 = 988 px

Como aportación a tu solución, más no la solución completa, las listas no ordenadas tienen un margin por defecto por el markup que utilizamos. La solución inmediata es:

Código CSS :

ul {
  font-size: 0;
}
li {
  font-size: 12pt; // wtv
}

Saludos.

Kinduff, intenté tu solución pero no la pude hacer funcionar, por no tener una base conceptual sólida tube que trabajar a "ensayo y error" tomando como punto de partida um menu horizontal que siempre utilizo en mis páginas. Me quedé con algunas dudas, una de ellas é porque no conseguí dejar el padding bottom como cero, cuando hago eso se pierde el alineamento. También, cuando coloqué un padding-top de 10 px la classe lateral-direita parecía tener un própio de ella y salía del alineamento quedando en el top con 20. En fin, aquí la "solución"

Código CSS :

.galeria ul{
   margin: 0;
   padding: 0;
   list-style-type: none;
}

.galeria ul li{
   position: relative;
   display: inline;
   float: left;
}

.galeria ul li a{
   display: block;
   width: 150px; /*1 - Largura de c/u dos items do menu*/
   padding:0 17px 10px 0;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
   
/* Holly Hack for IE \*/
* html .galeria ul li { float: left; height: 1%; }
* html .galeria ul li a { height: 1%; }
/* End */

li.lateral-esquerda {
   display: block;
   width: 150px; 
   padding:0 20px 10px 0;
}

li.lateral-direita {
   display: block;
   width: 150px; 
   padding: 0 0 10px 0;
}